Discussion :

[KaOo_30]

Bonjour,

Je viens vous demandez de l'aide pour un problème que j'ai rencontré. Je suis entrain de faire un formulaire qui demande le code postal de la personne et sa ville.
Lorsque la personne entre son code postal nous aurons une liste autocomplète qui s'affichera afin d'aider l'utilisateur, ensuite une fois choisie nous aurons la ville a entrer manuellement avec également une liste autocomplète qui s'affichera mais cette fois-ci seulement les villes qui appartiennent au code postal choisie. Cela n'empêchera pas l'utilisateur a entrer une ville autre que la liste proposé.

Ce que j'ai fais :

Mon formulaire :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
<div class="input-field col s12 m4">
                            <input id="cp" onkeypress="verifierChiffre(event); return false;" name="cp" type="text" class="autocomplete validate" placeholder="30000" autocomplete="section-deb postal-code" required>
                            <label for="cp">Code postal *</label>
                            <span id="hcp" class="helper-text" data-error=""></span>
                        </div>
                        <div class="input-field col s12 m4">
                            <input id="vil" name="vil" type="text" placeholder="Nimes" class="autocomplete validate" autocomplete="section-deb address-level1" required>
                            <label for="vil">Ville *</label>
                            <span id="hvil" class="helper-text" data-error=""></span>
                        </div>

Fonction pour avoir les code postaux :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var postals = null;
var villes = null;
 
function getPostals() {
    let iso = $('#pay option:selected').attr('data-iso');
    $.ajax({
        method: 'POST',
        url: 'ajax/getpostal.php',
        data: {
            ISO: iso
        },
        success: function (response, statut, xhr) {
            postals = JSON.parse(response);
            let instance = M.Autocomplete.getInstance($('#cp'));
            instance.updateData(postals);
        },
        error: function (xhr, statut, erreur) {
            if (xhr.status === 403) {
                window.location.replace("erreurs/403.html");
            } else if (xhr.status === 404) {
                M.toast({
                    html: "Ce pays n'a pas de codes postaux",
                    classes: 'red darken-3 rounded'
                });
                postals = null;
            }
        }
    });
}

fonction pour voir les villes :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function getVilles() {
    let iso = $('#pay option:selected').attr('data-iso');
    let postal = $('#cp').val();
    if (postal) $.ajax({
        method: 'POST',
        url: 'ajax/getvilles.php',
        data: {
            ISO: iso,
            POSTAL: postal
        },
        success: function (response, statut, xhr) {
            villes = JSON.parse(response);
            let instance = M.FormSelect.getInstance($('#vil'));
            if (instance) instance.destroy();
            else if (villes.length == 1) $('#vil').html('<option value="' + villes[0] + '" selected>' + villes[0] + '</option>');
            else {
                var html = '<option value="" disabled selected>- Choisir -</option>';
                villes.forEach(ville => {
                    html += '<option value="' + ville + '">' + ville + '</option>';
                });
                $('#vil').html(html);
            }
            $('#vil').formSelect();
        },
        error: function (xhr, statut, erreur) {
            if (xhr.status === 403) {
                window.location.replace("erreurs/403.html");
            } else if (xhr.status === 404) {
                M.toast({
                    html: "Ce code postal n'a pas de villes",
                    classes: 'red darken-3 rounded'
                });
                villes = null;
            }
        }
    });
}

resultat :




resultat attendu :



J'ai essayer de faire comme les codes postaux mais avec les villes mais ce fût une echec, je sais que je crée 2 case a cause de mon html:<option> ... </option>, mais je ne sais pas comment faire pour avoir seulement ces même résultat dans une liste mais en autorisant la saisie manuel.

J'espère mettre fais comprendre... Merci d'avance pour votre aide !