webinterface.git

1) // Without jQuery

2) 

3) 
4) ready(() => { 
5)   /* Do things after DOM has fully loaded */ 
6)    const searchBox = document.getElementById('query');
7)     const datalist = document.getElementById("suggestions");
8) 
9) searchBox.addEventListener("input", function(event) { 
10) 
11)     const timer = setTimeout(function () { 
12)         var sr = event.target.value;
13)         if (sr.length < 3) {
14)             return;
15)         }
16) 
17)         const request = new Request('su_ajax?term='+sr);
18)         fetch(request)
19)             .then((response) => response.json())
20)             .then((data) => {
21)                 if (searchBox.value) { //src not cleaned, backspace removed
22)                     datalist.replaceChildren(...searchResult(data));
23)                 }
24)             });
25) 
26)     }, 200);
27) 
28)     window.addEventListener('input', function (e) {
29)         if (e.inputType == 'insertReplacementText') {
30)             query = document.querySelector('#query').value;
31)             if (query[0] == 'u' || query[0] == 'c') {
32)                 window.location.href = "?do="+query;
33)             }
34)         }
35)     }, false);
36) 
37) });
38) 
39) function searchResult(result){
40)     mylist = [];
41)     result.forEach((x)=>{
42)         if(!x)return;
43)         mylist.push(createListItem(x))
44)     })
45) 
46)     return mylist;
47) }
48) 
49) function createListItem(x){
50)     const option = document.createElement('option') 
51)     option.value = x.id;
52)     option.innerText = x.value;
53)     return option

54) }

55) 
56) 
57) 
58)  document.querySelector("#query").focus();

59) });