https://www.selonnetchabanon-tourisme.fr/javascripts/cpVilleAutoComplete.js

1document.addEventListener('DOMContentLoaded', function () {
2    if (document.getElementById('int_cp')) {
3        setCpVilleListener(document.getElementById('cpVilleSuggestions'), document.getElementById('int_cp'), document.getElementById('int_ville'));
4    }
5});
6
7function setCpVilleListener(suggestionsContainer, postalCodeInput, cityInput)
8{
9    postalCodeInput.addEventListener('input', function () {
10        let query = postalCodeInput.value;
11        if (query.length === 5) {
12            fetch('https://api-adresse.data.gouv.fr/search/?q=' + query + '&type=municipality&autocomplete=1')
13                .then(response => response.json())
14                .then(data => {
15                    suggestionsContainer.innerHTML = '';
16                    if (data.features) {
17                        data.features.forEach(feature => {
18                            const suggestion = document.createElement('div');
19                            suggestion.textContent = feature.properties.label;
20                            suggestion.addEventListener('click', function () {
21                                if (postalCodeInput !== null && cityInput != null) {
22                                    postalCodeInput.value = feature.properties.postcode;
23                                    cityInput.value = feature.properties.city;
24                                    postalCodeInput.dispatchEvent(new Event('change', {bubbles: true}));
25                                    cityInput.dispatchEvent(new Event('change', {bubbles: true}));
26                                }
27                                suggestionsContainer.innerHTML = '';
28                                suggestionsContainer.style.border = 'none';
29                            });
30                            suggestionsContainer.appendChild(suggestion);
31                            suggestionsContainer.style.border = '1px solid #e0e1e1';
32                        });
33                    }
34                });
35        } else if (query.length > 1) {
36            fetch('https://geo.api.gouv.fr/departements/' + query.substring(0, 2) + '/communes')
37                .then(response => response.json())
38                .then(data => {
39                    let result = [];
40                    data.forEach(element => {
41                        result.push(element.codesPostaux[0] + ' ' + element.nom);
42                    });
43            if (query.length > 2) {
44                result = result.filter(item => item.includes(query));
45            }
46                    suggestionsContainer.innerHTML = '';
47            if (result.length > 0) {
48                result.forEach(feature => {
49                    const suggestion = document.createElement('div');
50                    suggestion.textContent = feature;
51                    const split = feature.split(' ');
52                    const postalCode = split[0];
53                    const city = split.slice(1,split.length);
54                    suggestion.addEventListener('click', function (e) {
55                        if (postalCodeInput !== null && cityInput != null) {
56                            postalCodeInput.value = postalCode;
57                            cityInput.value = city;
58                            postalCodeInput.dispatchEvent(new Event('change', {bubbles: true}));
59                            cityInput.dispatchEvent(new Event('change', {bubbles: true}));
60                        }
61                        suggestionsContainer.innerHTML = '';
62                        suggestionsContainer.style.border = 'none';
63                    });
64                    suggestionsContainer.appendChild(suggestion);
65                    suggestionsContainer.style.border = '1px solid #e0e1e1';
66                });
67            }
68                });
69        } else {
70            suggestionsContainer.innerHTML = '';
71        }
72    });
73
74    document.addEventListener('click', function (event) {
75        if (suggestionsContainer && !suggestionsContainer.contains(event.target)) {
76            suggestionsContainer.innerHTML = '';
77        }
78    });
79}