Catalog Search Bar
This one is dependent on how the search form is structured. Scripts should be placed in the body section of advanced, and style should be placed in style if you want it. The trickiest part is finding out the correct action link. I left the examples in there so you can have some idea of how it should look. There is also a bonus script that will move the search bars underneath the header links. If they have a lot of items in the header, use it. Good luck!
What the standard teaser form looks like:
<form action="https://oglesby-prcat.na2.iiivega.com/search" target="_blank">
<input placeholder="Search our catalog" name="query">
<input type="hidden" name="searchType" value="everything">
<input type="hidden" name="pageSize" value="10">
<input type="submit" value="Search">
</form>
Script to make the search bar:
<script>
window.onload = function() {
// Create the new form element
var newForm = document.createElement('form');
newForm.action = "https://oglesby-prcat.na2.iiivega.com/search";
newForm.target = "_blank";
newForm.className = "search-box ng-pristine ng-valid";
newForm.innerHTML = `
<div class="input-group">
<label for="catalog-search" class="sr-only">Search Catalog:</label>
<input type="text" id="catalog-search" class="form-control" name="query" placeholder="Search Catalog">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
</span>
</div>
<input type="hidden" name="searchType" value="everything">
<input type="hidden" name="pageSize" value="10">
`;
// Find the div with role="search"
var searchDiv = document.querySelector('div[role="search"]');
// Append the new form to this div
if (searchDiv) {
searchDiv.appendChild(newForm);
}
// Change the placeholder text of the original search bar
var originalSearchInput = document.querySelector('div[role="search"] .search-box:first-of-type input[type="text"]');
if (originalSearchInput) {
originalSearchInput.placeholder = "Search Website";
}
};
</script>
What the standard teaser form looks like:
<form method="get" id="searchForm" action="https://pld.ent.sirsi.net/client/embedded.search/default">
<input type="hidden" name="ln" value="en_US">
<input id="q" title="Search For:" maxlength="256" name="q" value="" type="text" accesskey="s">
<input value="Search" id="searchButton" class="button" title="Search" type="submit">
</form>
Script to make the search bar:
<script>
window.onload = function() {
// Create the new form element
var newForm = document.createElement('form');
newForm.action = "https://pld.ent.sirsi.net/client/en_US/default/search/";
newForm.method = "get";
newForm.target = "_blank";
newForm.className = "search-box ng-pristine ng-valid";
newForm.innerHTML = `
<div class="input-group">
<label for="catalog-search" class="sr-only">Search Catalog:</label>
<input type="text" id="catalog-search" class="form-control" name="lookfor" placeholder="Search Catalog" title="Enter one or more terms to search for. Surrounding a term with quotes will limit result to only those that exactly match the term.">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
</span>
</div>
<input name="searchSource" value="local" type="hidden">
<input name="basicType" value="Keyword" type="hidden">
`;
// Find the div with role="search"
var searchDiv = document.querySelector('div[role="search"]');
// Append the new form to this div
if (searchDiv) {
searchDiv.appendChild(newForm);
}
// Change the placeholder text of the original search bar
var originalSearchInput = document.querySelector('div[role="search"] .search-box:first-of-type input[type="text"]');
if (originalSearchInput) {
originalSearchInput.placeholder = "Search Website";
}
};
</script>
<!-- Dual Search Bar Start -->
<script>
window.onload = function() {
//Create and append the catalog search form
var newForm = document.createElement('form');
newForm.action = "https://coopersville.bibliocommons.com/search";
newForm.method = "get";
newForm.target = "_blank";
newForm.className = "search-box ng-pristine ng-valid";
newForm.innerHTML = `
<div class="input-group">
<label for="library-search" class="sr-only">Search the Library:</label>
<input type="text" id="library-search" class="form-control" name="q" placeholder="Search Catalog">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">Go!</button>
</span>
</div>
<input type="hidden" name="t" value="smart">
`;
var searchDiv = document.querySelector('div[role="search"]');
if (searchDiv) {
searchDiv.appendChild(newForm);
}
// Adjust the original search bar placeholder text
var originalSearchInput = document.querySelector('div[role="search"] .search-box:first-of-type input[type="text"]');
if (originalSearchInput) {
originalSearchInput.placeholder = "Search Website";
}
// Add spacing below the navigation
var nav = document.querySelector('.header-links');
if (nav) {
var spacer = document.createElement('div');
spacer.style.height = '50px';
nav.parentNode.insertBefore(spacer, nav.nextSibling);
}
// Create toggle buttons, insert them, and set up their functionality
var btnContainer = document.createElement('div');
btnContainer.style.display = 'flex';
btnContainer.style.justifyContent = 'flex-end';
btnContainer.style.width = '100%';
var searchCatalogLink = document.createElement('a');
searchCatalogLink.innerText = "Search Catalog";
searchCatalogLink.style.cursor = 'pointer';
searchCatalogLink.style.marginRight = '15px'; // Space between the two text links
searchCatalogLink.style.color = '#fff';
var searchWebsiteLink = document.createElement('a');
searchWebsiteLink.innerText = "Search Website";
searchWebsiteLink.style.cursor = 'pointer';
searchWebsiteLink.style.color = '#fff';
btnContainer.appendChild(searchCatalogLink);
btnContainer.appendChild(searchWebsiteLink);
searchDiv.appendChild(btnContainer);
// Update form selection after new form has been added
var websiteSearchForm = document.querySelector('form.search-box:not([action])');
var catalogSearchForm = document.querySelector('form[action="https://coopersville.bibliocommons.com/search"]');
// Hide the website search form by default
websiteSearchForm.style.display = 'none';
// Toggle functionality
searchWebsiteLink.addEventListener('click', function() {
websiteSearchForm.style.display = '';
catalogSearchForm.style.display = 'none';
});
searchCatalogLink.addEventListener('click', function() {
websiteSearchForm.style.display = 'none';
catalogSearchForm.style.display = '';
});
};
</script>
<!-- Dual Search Bar End -->
If you want the search bars next to each other rather than stacked, slap this in the styles section:
// This make the Catalog search in line with the normal search
div[role="search"] {
display: flex; // Enables flexbox
justify-content: flex-end; // Aligns children to the right
align-items: center; // Vertically centers the items
.search-box {
&:first-of-type {
margin-right: 20px; // Adds space between the search boxes
}
}
}
Place this in the body before the catalog search bar script:
<script>
document.addEventListener('DOMContentLoaded', function() {
var nav = document.querySelector('.header-links');
if (nav) {
var spacer = document.createElement('div');
spacer.style.height = '45px'; // You can adjust this value as needed
nav.parentNode.insertBefore(spacer, nav.nextSibling);
}
});
</script>
Replace all necessary fields in this script (insert script from above) so that it fits this action instead (insert form action)
Example of form action from Yorktown
<form action="https://yorktownlib.biblionix.com"> <input type="text" name="search" size="20" /> <input type="submit" value="GO" /> </form>