Autocomplétion des communes

Version imprimable

04/08/2022, 11h47
sylvain257

2 pièce(s) jointe(s)

Autocomplétion des communes

Bonjour à tous,

J'aimerais créer un formulaire avec une autocomplétion.

Je dispose de ce fichier JSON. J'aimerais pouvoir afficher une liste avec le nom des communes.

J'ai fait une requête Ajax, qui me redescend une response JSON.

La première réponse JSON ne renvoie qqch, la seconde me renvoie bien id. Le problème c'est que je n'arrive pas à descendre plus bas dans l'arborescence. Comment faire ?

Merci pour vos réponses

Pièce jointe 623312
Pièce jointe 623315
04/08/2022, 13h50
mathieu

l'image que vous montrez est le résultat de "console.log(records)" ?

Re-

Mon code....

Code:

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
38
<div class="card-content dark-text ui-widget	">
<span class="card-title">Rechercher par commune</span>
       <input id="insee" class="col s12 m12 autocomplete" type="text" onchange="autocompleteCommune()"><br>
</div>
 
 
<script>
function autocompleteCommune(){
 
        $.ajax({
                url: '****************',
                type:'GET',
                datatype:'json',
                data:{
                        "name":$("#insee").val(),
                        "niveaux":8,
                        "avec_insee":true
                },
                complete:function(res) {
                        if (checkAjaxError(res)) {
                                records=res.responseJSON;
 
                                $.each(records, function(index,value){
                                        var liste = value.entites[0].liste;
                                        $.each(liste, function(index, value){
                                                var insee_commune = value.insee;
                                                var nom_commune = value.nom; 
                                                console.log(nom_commune);// cela me renvoie la liste des noms de communes (ça marche)
// Le problème vient ici : l'autocomplétion fonctionne rarement (les requêtes doivent prendre trop de temps).
                                                        $("#insee").autocomplete({
                                                                source: [nom_commune]
                                                        })
                                        })
                                                })
                                        }}
                                })
                        }
</script>

Est ce que qqun pourrait corriger mon code ou me dire ce qui ne convient pas ? Est ce qu'il y a un moyen d'alléger ce code ?

Merci pour vos retours

Sylvain

Bonjour,

Ce n'est pas comme ça qu'on utilise l'autocomplétions de jquery-ui, il faudrait plutôt faire l'appel ajax à l'intérieur de la méthode source et filtrer le retour json en fonction de request.term comme ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$('#insee').autocomplete({
	source:function( request, response ) {
		$.ajax({
			dataType: "json",
			url: '.........',
			data: {
			       "term": request.term,
                               "niveaux":8,
			       "avec_insee":true
			},
			cache:false
		})
		.done(data=>{
			let d=$.grep(data[0].entities[0].liste,(item,index)=>item.nom.toLowerCase().indexOf(request.term.toLowerCase())>-1)
			.map(item=>{return {id:item.insee,label:item.nom};});
			console.log("data :",data,", d :",d);
			response(d);
		})
		.fail(err=>alert("Erreur autocomplete :"+err.responseText));
        }
});

@toufik : J'ai regardé ton code, j'avoue ne pas être assez compétent pour comprendre ce code.

J'ai cependant trouvé celui-ci qui est davantage à ma portée (du moins je comprends ce que je fais) et qui semble fonctionner. Le seul problème c'est qu'il n'y a qu'une commune suggérée à chaque fois, cad la dernière qui redescend dans la console (cf code ligne 20). Dans le cas de Moissac, l'application devrait redescendre 3 suggestions

Des idées ?

Code:

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
$(function() {
      $( "#insee" ).autocomplete({
          source: function(request, response) {
              $.ajax({
		     url: "***********",
                     type: "GET",
		     dataType: "json",
	             data: {
				"name": request.term,
				"niveaux":8,
				"avec_insee":true
		     },
		     complete:function(res) {
 		      if (checkAjaxError(res)) {
 				records=res.responseJSON;
				var liste = records[0].entites[0].liste;
				$.each(liste, function(index, value){
				     insee_commune = value.insee;
				     nom_commune = value.nom;
			             console.log(insee_commune + ' - ' + nom_commune); // pour Moissac, il sera renvoyé dans la console (82112 - Moissac / 83078 - Moissac-Bellevue / 48097 - Moissac-Vallée-Française)
				     response([nom_commune]);
				})
		       }
 		       }
          })}
     })
})

Bonjour,

C'est normal que l'autocomplétions n'affiche que le dernier élément vu que vous passez un tableau avec un seul item à chaque tour de la boucle.

Si tu veux faire comme ça, il va falloir utiliser un tableau et le remplir à partir de la réponse json :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
complete:function(res) {
          if (checkAjaxError(res)) {
 		records=res.responseJSON;
		var liste = records[0].entites[0].liste,data=[];
		$.each(liste, function(index, value){
			insee_commune = value.insee;
			nom_commune = value.nom;
			console.log(insee_commune + ' - ' + nom_commune);
                        //remplir le tableau avec les items value et label (utilisé par $.autocomplete)
                        data.push({"value":insee_commune,"label":nom_commune}); 
		});
                response(data);//Déplacer cette ligne à l'extérieur de la boucle
          }
}

Ok merci, ça fonctionne :-) Et dernière question, comment récupérer l'insee de la commune sélectionnée dans la liste ? Pour le moment, n'est récupérée que la valeur de la dernière commune de la liste.

Mon code HTML associé :
Code:

1 2 3 4 5 6 7 8 9 <div class="card"> <div class="card-content dark-text ui-widget"> <span class="card-title">Rechercher par commune</span> <input id="insee" class="col s12 m12 autocomplete autocomplete_com" type="text"><br> </div> <div class="card-action"> <button class="btn col s6 m6 offset-s3 offset-m3" onclick="searchCarteCom(this)">Chercher</button> </div> </div>

05/08/2022, 14h40
Toufik83

Bonjour,

Pour récupérer le id il faut utiliser la méthode select.
05/08/2022, 15h48
sylvain257

Ca marche :-) Merci pour ton aide.
Sylvain