https://unionclinic.ru/local/templates/clin_new/assets/js/autocomplete.js

1function autocomplete(input, data, callback) {
2    /*the autocomplete function takes two arguments,
3    the text field element and an array of possible autocompleted values:*/
4    let currentFocus;
5    /*execute a function when someone writes in the text field:*/
6    $(input).on('input', function(e) {
7        let itemsWrap, item, i, val = this.value, strPos;
8        /*close any already open lists of autocompleted values*/
9        closeAllLists();
10        if (!val) { return false;}
11        currentFocus = -1;
12        /*create a DIV element that will contain the items (values):*/
13        itemsWrap = document.createElement("DIV");
14        itemsWrap.setAttribute("id", this.id + "autocomplete-list");
15        itemsWrap.setAttribute("class", "autocomplete-items");
16        /*append the DIV element as a child of the autocomplete container:*/
17        this.parentNode.appendChild(itemsWrap);
18        /*for each item in the array...*/
19        for (i = 0; i < data.length; i++) {
20            if (data[i] != null) {
21                /*check if the item starts with the same letters as the text field value:*/
22                strPos = data[i].toUpperCase().indexOf(val.toUpperCase());
23                if (strPos >= 0) {
24                    /*create a DIV element for each matching element:*/
25                    item = document.createElement("DIV");
26                    /*make the matching letters bold:*/
27                    item.innerHTML = data[i].substr(0, strPos);
28                    item.innerHTML += "<strong>" + data[i].substr(strPos, val.length) + "</strong>";
29                    item.innerHTML += data[i].substr(strPos + val.length);
30                    /*insert a input field that will hold the current array item's value:*/
31                    item.innerHTML += "<input type='hidden' value='" + data[i] + "'>";
32                    /*execute a function when someone clicks on the item value (DIV element):*/
33                    item.addEventListener("click", function(e) {
34                        e.preventDefault();
35                        /*insert the value for the autocomplete text field:*/
36                        input.value = this.getElementsByTagName("input")[0].value;
37                        /*close the list of autocompleted values,
38                        (or any other open lists of autocompleted values:*/
39                        closeAllLists();
40                        callback();
41                    });
42                    itemsWrap.appendChild(item);
43                }
44            }
45        }
46    });
47    /*execute a function presses a key on the keyboard:*/
48    $(input).on('keydown', function(e) {
49        let acItems = $('#' + this.id + 'autocomplete-list').find('div');
50
51        if (e.keyCode == 40) {
52            /*If the arrow DOWN key is pressed,
53            increase the currentFocus variable:*/
54            currentFocus++;
55            /*and and make the current item more visible:*/
56            addActive(acItems);
57        } else if (e.keyCode == 38) { //up
58            /*If the arrow UP key is pressed,
59            decrease the currentFocus variable:*/
60            currentFocus--;
61            /*and and make the current item more visible:*/
62            addActive(acItems);
63        } else if (e.keyCode == 13) {
64            /*If the ENTER key is pressed, prevent the form from being submitted,*/
65            e.preventDefault();
66            if (currentFocus > -1 && acItems[0]) {
67                /*and simulate a click on the "active" item:*/
68                acItems[currentFocus].click();
69            }
70        }
71    });
72    function addActive(item) {
73        /*a function to classify an item as "active":*/
74        if (!item) return false;
75        /*start by removing the "active" class on all items:*/
76        removeActive(item);
77        if (currentFocus >= item.length) {
78            currentFocus = 0;
79        }
80        if (currentFocus < 0) {
81            currentFocus = (item.length - 1);
82        }
83        /*add class "autocomplete-active":*/
84        item[currentFocus].classList.add("autocomplete-active");
85    }
86    function removeActive(item) {
87        /*a function to remove the "active" class from all autocomplete items:*/
88        for (let i = 0; i < item.length; i++) {
89            item[i].classList.remove("autocomplete-active");
90        }
91    }
92    function closeAllLists(element) {
93        /*close all autocomplete lists in the document,
94        except the one passed as an argument:*/
95        let acItems = $(".autocomplete-items");
96        for (let i = 0; i < acItems.length; i++) {
97            if (element != acItems[i] && element != input) {
98                acItems[i].parentNode.removeChild(acItems[i]);
99            }
100        }
101    }
102    /*execute a function when someone clicks in the document:*/
103    $(document).on('click', function (e) {
104        closeAllLists(e.target);
105    });
106}