Skip to main content

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>