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 !

[mathieu]

regardez avec la console de développement de votre navigateur si le code php renvoie les valeurs prévues.
par exemple avec Firefox, faites Ctrl + Maj + E pour voir l'onglet "réseau" :
https://developer.mozilla.org/fr/doc...ur_r%C3%A9seau

[KaOo_30]

Oui les réponses retourné son correct, nous avons les bonnes villes qui font partie du code postal sélectionné.

[mathieu]

s'il n'y a personne ici qui utilise Materialyze, on va avoir du mal à vous aider.

en attendant, vous pouvez essayer de passer par la bibliothèque jquery ui :
https://jqueryui.com/autocomplete/

[KaOo_30]

Le problème n'est pas materialyze. C'est l'AJAX mon soucis.





Ceci est mon ajax qui permet de commencer a taper un code postal est qu'il propose des données connu. Comme sur l'exemple au dessus.





J'ai donc fait pareil avec ma ville, sauf que cette fois dans mon instance je contient toute les villes que je souhaite en data :

exemple de l'instance pour le code postal :



ensuite je saisie un code postal



J'ai donc bien les villes correspondant a mon code postal entré, seulement lorsque j'essaye d'entrer une ville correspondante aucun autocomplete s'affiche.

[KaOo_30]

J'ai chercher refais mon code et fini par trouver une solution par moi même. Si quelqu'un a le même problème qu'il le fasse savoir.