https://www.helmond.nl/es-globals.js

1var tmpl;
2
3var debounce = function (func, wait, immediate) {
4     var timeout;
5     return function() {
6         var context = this, args = arguments;
7         var later = function() {
8                 timeout = null;
9                 if (!immediate) func.apply(context, args);
10         };
11         var callNow = immediate && !timeout;
12         clearTimeout(timeout);
13         timeout = setTimeout(later, wait);
14         if (callNow) func.apply(context, args);
15     };
16};
17
18function getModalResult(id, val) {
19  var xhttp = new XMLHttpRequest();
20  xhttp.onreadystatechange = function() {
21    if (this.readyState == 4 && this.status == 200) {
22      var data = JSON.parse(this.responseText);
23      tmpl = document.getElementById("tmpl_es_result_modal").innerHTML;
24      Mustache.parse(tmpl);
25  	  var result = Mustache.render(tmpl, data);    
26      var targetElement = document.getElementById(id);
27      targetElement.innerHTML = result;
28      // Required for Matomo
29      if (typeof addEventTracker === "function") {
30        addEventTracker(targetElement);
31	  }
32    }
33  };
34  xhttp.open("GET", "/search-result-modal-data?q=" + val, true);
35  xhttp.send();
36}
37
38
39function autocomplete(inp) {
40  /*the autocomplete function takes two arguments,
41  the text field element and an array of possible autocompleted values:*/
42  /*execute a function when someone writes in the text field:*/
43  inp.addEventListener("input", debounce(function(e) {
44      var a, b, i, val = this.value;
45      /*close any already open lists of autocompleted values*/
46      closeAllLists();
47      //console.log(val);
48      if (!val) { return false;}
49      currentFocus = -1;
50      document.getElementById("searchform").classList.add('hasfocus');
51      /*create a DIV element that will contain the items (values):*/
52      a = document.createElement("DIV");
53      a.setAttribute("id", this.id + "autocomplete-list");
54      a.setAttribute("class", "autocomplete-items p-3 bg-white border border-primary border-top-0");
55      /*append the DIV element as a child of the autocomplete container:*/
56      this.parentNode.appendChild(a);
57      /*for each item in the array...*/
58      getModalResult(this.id + "autocomplete-list", val);
59      //setArrowfunction(this.id + "autocomplete-list", val);
60  }, 500));
61  /*execute a function presses a key on the keyboard:*/
62  inp.addEventListener("keydown", function(e) {
63      // TO DO: push tab with keydown
64  });
65  
66  function closeAllLists(elmnt) {
67    /*close all autocomplete lists in the document,
68    except the one passed as an argument:*/
69    var x = document.getElementsByClassName("autocomplete-items");
70    for (var i = 0; i < x.length; i++) {
71      if (elmnt != x[i] && elmnt != inp && !x[i].contains(elmnt)) {
72        x[i].parentNode.removeChild(x[i]);
73      }
74    }
75    document.getElementById("searchform").classList.remove('hasfocus');
76  }
77  /*execute a function when someone clicks in the document:*/
78  document.addEventListener("click", function (e) {
79      closeAllLists(e.target);
80  });
81}
82
83var esCallback = function(){
84  tmpl = document.getElementById("tmpl_es_result_modal").innerHTML;
85  Mustache.parse(tmpl);
86  
87  autocomplete(document.getElementById("searchpageinput"));
88};
89
90if (
91    document.readyState === "complete" ||
92    (document.readyState !== "loading" && !document.documentElement.doScroll)
93) {
94  esCallback();
95} else {
96  document.addEventListener("DOMContentLoaded", esCallback);
97}