Catalog Search in nav bar 😬 (works on homepage and internal)
https://bridgeportlibrary.specialdistrict.org/
<script>
(function() {
const targetHref = "/search-the-catalog";
const targetText = "Search the Catalog";
const libraryURL = "https://libraryname.biblionix.com"; // Replace with real URL
const observer = new MutationObserver((mutations, obs) => {
const anchor = document.querySelector(`a[href="${targetHref}"]`);
if (anchor && anchor.textContent.trim() === targetText) {
const parentLi = anchor.closest("li");
if (parentLi) {
const form = document.createElement("form");
form.action = libraryURL;
form.style.display = "flex";
form.style.alignItems = "center";
form.style.gap = "0.25rem";
const input = document.createElement("input");
input.type = "text";
input.name = "search";
input.size = "15";
input.placeholder = "Search the catalog";
const submit = document.createElement("input");
submit.type = "submit";
submit.value = "GO";
form.appendChild(input);
form.appendChild(submit);
parentLi.innerHTML = ""; // Clear out old content
parentLi.appendChild(form); // Insert new form
obs.disconnect(); // Stop observing once done
}
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
})();
</script>