Add UI search event hooks

[tlvince]

I'm looking to add telemetry to @pagefind/default-ui to track engagement with the search component. Being able to hook into certain event types such as "search field focused", "form submitted", "results received" etc. would be super useful.

[tlvince]

As a workaround, I'm inferring "form submitted" by checking for changes in the results div, with something like:

new MutationObserver((mutations) => {
  for (const mutation of mutations) {
    if (mutation.type === "childList") {
      mutation.addedNodes.forEach((node) => {
        if (
          node instanceof Element &&
          node.classList.contains("pagefind-ui__results")
        ) {
          console.log("Search: results received");
        }
      });
    }
  }
}).observe(document.querySelector("#search-container"), {
  childList: true,
  subtree: true,
});