blog.bythewood.me-flask

  1/**
  2 * Search.js
  3 *
  4 * Provides live search for any "id_search" field using the URL
  5 * /search/live/?q=<query>
  6 *
  7 * Arrow keys navigate results, Enter follows the selected link.
  8 */
  9
 10document.addEventListener("DOMContentLoaded", function () {
 11  const searchEl = document.getElementById("id_search");
 12  if (!searchEl) return;
 13
 14  let activeIndex = -1;
 15
 16  const getItems = () => {
 17    const container = searchEl.parentElement.querySelector("#id_search_results ul");
 18    return container ? Array.from(container.querySelectorAll("a")) : [];
 19  };
 20
 21  const setActive = (index) => {
 22    const items = getItems();
 23    items.forEach((item) => item.classList.remove("active"));
 24    activeIndex = index;
 25    if (index >= 0 && index < items.length) {
 26      items[index].classList.add("active");
 27      items[index].scrollIntoView({ block: "nearest" });
 28    }
 29  };
 30
 31  const clearResults = () => {
 32    const resultsEl = searchEl.parentElement.querySelector("#id_search_results");
 33    if (resultsEl) {
 34      searchEl.parentElement.removeChild(resultsEl);
 35    }
 36    activeIndex = -1;
 37  };
 38
 39  searchEl.addEventListener("keydown", function (e) {
 40    const items = getItems();
 41    if (!items.length) return;
 42
 43    if (e.key === "ArrowDown") {
 44      e.preventDefault();
 45      setActive(activeIndex < items.length - 1 ? activeIndex + 1 : 0);
 46    } else if (e.key === "ArrowUp") {
 47      e.preventDefault();
 48      setActive(activeIndex > 0 ? activeIndex - 1 : items.length - 1);
 49    } else if (e.key === "Enter" && activeIndex >= 0 && activeIndex < items.length) {
 50      e.preventDefault();
 51      window.location.href = items[activeIndex].href;
 52    }
 53  });
 54
 55  searchEl.addEventListener("keyup", function (e) {
 56    // Ignore navigation keys
 57    if (["ArrowDown", "ArrowUp", "Enter"].includes(e.key)) return;
 58
 59    const query = searchEl.value;
 60    if (query.length === 0) {
 61      clearResults();
 62      return;
 63    }
 64
 65    const url = "/search/live/?q=" + encodeURIComponent(query);
 66    fetch(url)
 67      .then((response) => response.json())
 68      .then((data) => {
 69        clearResults();
 70        if (!data.length) return;
 71
 72        const resultsEl = document.createElement("div");
 73        resultsEl.id = "id_search_results";
 74        searchEl.parentElement.appendChild(resultsEl);
 75
 76        const resultsDiv = document.createElement("ul");
 77        resultsDiv.classList.add("list-group", "rounded-bottom", "position-absolute", "mt-2");
 78        resultsDiv.style.zIndex = "1100";
 79        resultsDiv.style.width = searchEl.offsetWidth + "px";
 80        resultsDiv.style.backgroundColor = "#13120e";
 81        resultsDiv.style.border = "1px solid rgba(107,158,120,0.15)";
 82        resultsEl.appendChild(resultsDiv);
 83
 84        data.forEach((result) => {
 85          const a = document.createElement("a");
 86          a.classList.add("list-group-item", "list-group-item-action");
 87          const title = result.title.replace(
 88            new RegExp(query, "gi"),
 89            "<strong>" + query + "</strong>"
 90          );
 91          const description = result.description.replace(
 92            new RegExp(query, "gi"),
 93            "<strong class='fw-bolder'>" + query + "</strong>"
 94          );
 95          a.innerHTML = "<span class='fw-bold'>" + title + "</span>" + "<br><span class='text-muted'>" + description + "</span>";
 96          a.href = result.url;
 97          resultsDiv.appendChild(a);
 98        });
 99      });
100  });
101
102  searchEl.addEventListener("blur", function (e) {
103    const searchResults = searchEl.parentElement.querySelector("#id_search_results");
104    if (searchResults && !searchResults.contains(e.relatedTarget)) {
105      clearResults();
106    }
107  });
108});