Skip to main content

congruent search the catalog button amplify and internal 

active on bridgeport library. 

1. Create a secondary menu item named "Search the Catalog" and it can be a link to the catalog / external page. 

2. Add another secondary menu item after it "search the website" (we will hide this on internal pages later).
3. Use ChatGPT to replace necessary fields in the script in the accordion below, then add it to the advanced sitewide. 

(will need to do the chat gpt prompt to "substitute all necessary fields in this script to match this function" first)

Add to advanced site wide before </body> 

<script>
(function () {
  const targetHref = "/search-the-catalog";
  const targetText = "Search the Catalog";
  const catalogURL = "https://bridgeportlibrary.biblionix.com/catalog/";

  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.style.display = "flex";
        form.style.alignItems = "center";
        form.style.gap = "0.25rem";

        const input = document.createElement("input");
        input.type = "text";
        input.placeholder = "Search the catalog";
        input.classList.add("biblionix-search-input");

        const button = document.createElement("button");
        button.type = "submit";
        button.textContent = "GO";

        form.addEventListener("submit", function (e) {
          e.preventDefault();
          const query = input.value.trim();
          if (query) {
            window.open(`${catalogURL}?search=${encodeURIComponent(query)}`, "_blank");
          }
        });

        form.appendChild(input);
        form.appendChild(button);

        parentLi.innerHTML = "";
        parentLi.appendChild(form);

        obs.disconnect();
      }
    }
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });
})();
</script>

4. Add Styles 

Add to Advanced CSS 

//styles the search bar

form[action*="biblionix"] {
  max-width: 100%;
}

form[action*="biblionix"] input[type="text"] {
  font-size: 1rem;
  padding: 0.25rem 0.5rem;
  width: 220px; /* ✅ Wider to fit full placeholder */
  box-sizing: border-box;
  min-width: 12ch;
  border: 1px solid #ccc;
  border-radius: 4px;
}

form[action*="biblionix"] button {
  font-size: 1rem;
  padding: 0.25rem 0.75rem;
  background: #fff;
  border: 1px solid #000;
  border-radius: 4px;
  color: #000;
  cursor: pointer;
}

form[action*="biblionix"] button:hover {
  background-color: #f0f0f0;
}
input, button, select, textarea {
  color: #000000 !important;
}
form[action*="biblionix"] input[type="text"] {
  width: 200px;
  padding: 0.25rem 0.5rem;
  font-size: 1rem;
  box-sizing: border-box;
}

form[action*="biblionix"] input::placeholder {
  font-size: 1rem;
  color: #666;
  opacity: 1;
}
//hides amplify homepage search menu item on internal pages
#page-header > div > nav > div > ul > li:last-child > a {
display: none;
}