Pagefind with auto-updating query parameter

pagefindSetup.js

  const params = new Proxy(new URL(window.location), {
    get: (url, prop) => url.searchParams.get(prop),
    set: (url, prop, value) => {
      url.searchParams.set(prop, value);
      window.history.replaceState({}, "", url);
    },
  });
  window.addEventListener("DOMContentLoaded", async (event) => {
    // initialize the search UI
    const search = await new PagefindUI({
      element: "#search",
      showSubResults: true,
      excerptLength: 40,
    });

    // read in initial query from URL
    await search.triggerSearch(params.q);

    // whenever the search input is updated, update its query parameter in the URL
    const inputElement = document.querySelector("#search input");
    inputElement.addEventListener("input", (e) => {
      params.q = e.target.value;
    });
  });