https://www.kunstgalerie-info.nl/design2/new-header/js/autocomplete-dropdown-most-searched.js

1(function () {
2  const input = document.querySelector("#autoComplete");
3  const autocompleteDropdownMostSearched = document.querySelector(
4    ".autocomplete-dropdown-most-searched"
5  );
6
7  input.addEventListener("focus", () => {
8    autocompleteDropdownMostSearched.classList.add("active");
9  });
10
11  document.addEventListener("click", (evt) => {
12    const flyoutElement = document.querySelector(".site-form-search");
13    let targetElement = evt.target; // clicked element
14
15    do {
16      if (targetElement == flyoutElement) {
17        return;
18      }
19      // Go up the DOM
20      targetElement = targetElement.parentNode;
21    } while (targetElement);
22
23    // This is a click outside.
24    autocompleteDropdownMostSearched.classList.remove("active");
25  });
26})();
27
28var input = document.getElementById("autoComplete");
29
30const autocompleteDropdownMostSearched = document.querySelector(
31".autocomplete-dropdown-most-searched"
32);
33
34autocomplete({
35    input: input,
36    emptyMsg: null,
37    className: 'autocomplete-dropdown',
38    fetch: function (text, update) {
39        text = text.toLowerCase();
40
41        fetch('/includes/autosuggest.php?input='+encodeURIComponent(text))
42            .then(response => response.json())
43            .then(json => {
44                var suggestions = [];
45                for (var i = 0; i < json.length; i++) {
46                    var current = json[i];
47                    suggestions.push({
48                        label: current.resultaat,
49                        item: current,
50                        group: current.soort
51                    });
52                }
53
54                update(suggestions);
55
56                autocompleteDropdownMostSearched.classList.remove("active");
57            });
58    },
59    onSelect: function (item) {
60        document.location = item.item.url;
61    }
62});