https://marivalarmony.com.mx/js/autocomplete.js?v=1791465035

1
2window.onload = async function () {
3  const response = await fetch("/js/from.json");
4  const countries = await response.json();
5
6  function normalizer(text) {
7    return text.normalize("NFD").replace(/[\u0300-\u036f]/g, "")
8  }
9
10  function likeWithAccents(text, toCompare) {
11    const normalizedText = normalize(text).toLowerCase();
12    const normalizedToCompare = normalize(toCompare).toLowerCase();
13    const regexPattern = new RegExp(normalizedtoCompare.replace(/%/g, ""));
14    return regexPattern.test()
15  }
16
17  function autocomplete(inp, arr) {
18
19    if(!document.getElementById("flight")) {return}
20    
21    /*the autocomplete function takes two arguments,
22    the text field element and an array of possible autocompleted values:*/
23    var currentFocus;
24    /*execute a function when someone writes in the text field:*/
25    inp.forEach(function(element){
26
27  
28      element.addEventListener("input", function(e) {
29        var a, b, i, c, val = this.value;
30        /*close any already open lists of autocompleted values*/
31        closeAllLists();
32        if (!val) { return false;}
33        currentFocus = -1;
34
35        if(document.getElementById("search-countrycontent-list")) {document.getElementById("search-countrycontent-list").remove()};
36
37        c = document.createElement("DIV");
38        c.setAttribute("id", this.id + "content-list");
39
40        /*create a DIV element that will contain the items (values):*/
41        a = document.createElement("DIV");
42        a.setAttribute("id", this.id + "autocomplete-list");
43        a.setAttribute("class", "autocomplete-items");
44        /*append the DIV element as a child of the autocomplete container:*/
45        c.append(a);
46
47        this.parentNode.appendChild(c);
48
49        /*for each item in the array...*/
50        for (i = 0; i < arr.length; i++) {
51        
52          /*check if the item starts with the same letters as the text field value:*/
53          // if (arr[i]["name"].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
54          let compare = arr[i]["AirportCity"] + ' - ' + arr[i]["AirportCode"];
55          if(normalizer(compare).toUpperCase().match(normalizer(val).toUpperCase())) {
56            /*create a DIV element for each matching element:*/ 
57            b = document.createElement("DIV");
58            /*make the matching letters bold:*/
59            b.innerHTML = "<strong>" + compare + "</strong>";
60            // b.innerHTML += compare;
61            /*insert a input field that will hold the current array item's value:*/
62            b.innerHTML += "<input type='hidden' value='" + arr[i]["AirportCode"] + "'>";
63            /*execute a function when someone clicks on the item value (DIV element):*/
64            b.addEventListener("click", function(e) {
65                /*insert the value for the autocomplete text field:*/
66                // var tam = this.getElementsByTagName("input")[0].value.length;
67                
68                // inp.value = this.getElementsByTagName("input")[0].value.substring((tam -5), tam-1).replace(/[^a-zA-Z]/, '')
69                let val = this.getElementsByTagName("input")[0].value;
70                inp.forEach(function(setValue){
71                  setValue.value = val
72                })
73
74                /*close the list of autocompleted values,
75                (or any other open lists of autocompleted values:*/
76                closeAllLists();
77            });
78            a.appendChild(b);
79          }
80        }
81
82    });
83
84
85
86    /*execute a function presses a key on the keyboard:*/
87    element.addEventListener("keydown", function(e) {
88    
89        var x = document.getElementById(this.id + "content-list");
90        if (x) x = x.getElementsByTagName("div");
91        if (e.keyCode == 40) {
92          /*If the arrow DOWN key is pressed,
93          increase the currentFocus variable:*/
94          currentFocus++;
95          /*and and make the current item more visible:*/
96          addActive(x);
97        } else if (e.keyCode == 38) { //up
98          /*If the arrow UP key is pressed,
99          decrease the currentFocus variable:*/
100          currentFocus--;
101          /*and and make the current item more visible:*/
102          addActive(x);
103        } else if (e.keyCode == 13) {
104          /*If the ENTER key is pressed, prevent the form from being submitted,*/
105          e.preventDefault();
106          if (currentFocus > -1) {
107            /*and simulate a click on the "active" item:*/
108            if (x) x[currentFocus].click();
109          }
110        }
111    });
112  });
113
114    function addActive(x) {
115      /*a function to classify an item as "active":*/
116      if (!x) return false;

117      /*start by removing the "active" class on all items:*/
118      removeActive(x);
119      if (currentFocus >= x.length) currentFocus = 0;
120      if (currentFocus < 0) currentFocus = (x.length - 1);
121      /*add class "autocomplete-active":*/
122      x[currentFocus].classList.add("autocomplete-active");
123    }
124
125    function removeActive(x) {
126      /*a function to remove the "active" class from all autocomplete items:*/
127      for (var i = 0; i < x.length; i++) {
128        x[i].classList.remove("autocomplete-active");
129      }
130    }
131
132    function closeAllLists(elmnt) {
133      /*close all autocomplete lists in the document,
134      except the one passed as an argument:*/
135      var x = document.getElementsByClassName("autocomplete-items");
136      for (var i = 0; i < x.length; i++) {
137        if (elmnt != x[i] && elmnt != inp) {
138          x[i].parentNode.removeChild(x[i]);
139        }
140      }
141      if(document.getElementById("search-countrycontent-list")) {document.getElementById("search-countrycontent-list").remove()};
142    }
143
144    function hideLists(elmnt) {
145      /*close all autocomplete lists in the document,
146      except the one passed as an argument:*/
147      var elemen = document.querySelector(".autocomplete-items");
148      elemen.style = 'display:none';
149      if(document.getElementById("search-countrycontent-list")) {document.getElementById("search-countrycontent-list").remove()};
150
151
152    }
153
154      /*execute a function when someone clicks in the document:*/
155      document.addEventListener("click", function (e) {
156          if(!document.querySelector(".autocomplete-items")) {
157            return
158          }else {
159            hideLists(e.target);
160          }
161      });
162  } 
163
164
165  autocomplete(document.querySelectorAll(".flight-input #flight"), countries);
166
167}