https://www.daniel-moquet.fr/dist/js/AutoCompleteCity.js?v=20260318

1let token = '';
2
3function autocompleteZipCode(input) {
4    let currentFocus;
5    let doneTypingInterval = 250;
6
7    let callXHR = _.debounce((e) => {
8        callXHRCityApi(e.target)
9    }, doneTypingInterval);
10
11    input.addEventListener('input', function (e) {
12        document.getElementById('codeInsee').value = '';
13        document.getElementById('codePostal').value = '';
14        document.getElementById('codeInsee').dispatchEvent(new Event('input'));
15        if (e.target.value.trim().length >= 3) {
16            callXHR(e);
17        }
18    });
19    /*execute a function presses a key on the keyboard:*/
20    input.addEventListener('keydown', function (e) {
21        let x = document.getElementById(this.id + 'autocomplete-list');
22        if (x) x = x.getElementsByTagName('div');
23        if (e.keyCode === 40) {
24            currentFocus++;
25            addActive(x);
26        } else if (e.keyCode === 38) {
27            currentFocus--;
28            addActive(x);
29        } else if (e.keyCode === 13) {
30            e.preventDefault();
31            if (currentFocus > -1) {
32                if (x) x[currentFocus].click();
33            }
34        }
35    });
36
37    function addActive(x) {
38        if (!x) return false;
39        removeActive(x);
40        if (currentFocus >= x.length) currentFocus = 0;
41        if (currentFocus < 0) currentFocus = (x.length - 1);
42        x[currentFocus].classList.add('autocomplete-active');
43    }
44
45    function removeActive(x) {
46        /*a function to remove the "active" class from all autocomplete items:*/
47        for (let i = 0; i < x.length; i++) {
48            x[i].classList.remove('autocomplete-active');
49        }
50    }
51}
52
53function callXHRCityApi(input) {
54    // On supprime les caractères spéciaux SAUF les accents et les tirets, on conserve les espaces
55    let keyWords = input.value.trim().replace(/[^\p{L}\d\s-]/gu, '');
56    keyWords = encodeURIComponent(keyWords);
57
58    let url = window.cityApiUrl + '/city/search';
59
60    url = url + "?words=" + keyWords;
61    fetch(url, {
62        method: 'GET',
63        mode: 'cors',
64        headers:
65            {
66                "X-Leb-Auth": token,
67            },
68    })
69        .then((response) => response.json())
70        .then((result) => {
71            let a = document.createElement('DIV');
72            a.setAttribute('id', this.id + 'autocomplete-list');
73            a.setAttribute('class', 'autocomplete-items');
74            document.querySelector('div .example')
75            if (input.parentElement.getElementsByClassName('autocomplete-items').length > 0) {
76                input.parentElement.getElementsByClassName('autocomplete-items')[0].remove();
77            }
78            input.parentNode.appendChild(a);
79
80            result.forEach(function (item) {
81                let b = document.createElement('DIV');
82                b.innerHTML = '<strong>' + item.zipCode + '</strong>';
83                b.innerHTML += ' - ' + item.name;
84                b.innerHTML += '<input type="hidden" id="autocomplete_codeInsee" value="' + item.inseeCode + '">';
85                b.innerHTML += '<input type="hidden" id="autocomplete_text" value="' + item.zipCode + ' - ' + item.name + '">';
86                b.addEventListener('click', function (e) {
87                    const allCodePostalInputs = document.querySelectorAll('input[id="codePostal"]')
88                    allCodePostalInputs.forEach(cpi => {
89                        cpi.value = this.children[0].textContent;
90                    })
91                    const allCodeInseeInputs = document.querySelectorAll('#codeInsee');
92                    allCodeInseeInputs.forEach(cii => {
93                        cii.value = this.children[1].value;
94                        document.getElementById('codeInsee').dispatchEvent(new Event('input'))
95                    });
96                    input.value = this.children[2].value;
97                    closeAllLists();
98                });
99                a.appendChild(b);
100            })
101        })
102        .catch(function (err) {
103            console.warn('Something went wrong.', err);
104        });
105
106    function closeAllLists(element) {
107        let x = document.getElementsByClassName('autocomplete-items');
108        for (let i = 0; i < x.length; i++) {
109            if (element !== x[i] && element !== input) {
110                x[i].parentNode.removeChild(x[i]);
111            }
112        }
113    }
114
115    document.addEventListener('click', function (e) {
116        closeAllLists(e.target);
117    });
118}
119
120(function () {
121    token = window.cityApiToken;
122    if (null !== document.getElementById('searchCity')) {
123        const inputSearch = document.querySelectorAll('#searchCity');

124        inputSearch.forEach(is => {
125            if (null !== is) {
126                autocompleteZipCode(is);
127            }
128        })
129    }
130})();