IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Autocomplétion des communes


Sujet :

jQuery

  1. #1
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    novembre 2018
    Messages
    53
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : novembre 2018
    Messages : 53
    Points : 41
    Points
    41
    Par défaut 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

    Nom : capture_json.PNG
Affichages : 88
Taille : 8,8 Ko
    Nom : tempsnip.png
Affichages : 85
Taille : 24,6 Ko

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 205
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 205
    Points : 14 115
    Points
    14 115
    Par défaut
    l'image que vous montrez est le résultat de "console.log(records)" ?

  3. #3
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    novembre 2018
    Messages
    53
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : novembre 2018
    Messages : 53
    Points : 41
    Points
    41
    Par défaut
    Re-

    Mon code....

    Code html : 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
    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

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    2 086
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 2 086
    Points : 4 038
    Points
    4 038
    Par défaut
    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 : 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
    $('#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));
            }
    });

  5. #5
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    novembre 2018
    Messages
    53
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : novembre 2018
    Messages : 53
    Points : 41
    Points
    41
    Par défaut
    @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 : 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
    $(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]);
    				})
    		       }
     		       }
              })}
         })
    })

  6. #6
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    2 086
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 2 086
    Points : 4 038
    Points
    4 038
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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
              }
    }

  7. #7
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    novembre 2018
    Messages
    53
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : novembre 2018
    Messages : 53
    Points : 41
    Points
    41
    Par défaut
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    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>

  8. #8
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    2 086
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 2 086
    Points : 4 038
    Points
    4 038
    Par défaut
    Bonjour,

    Pour récupérer le id il faut utiliser la méthode select.

  9. #9
    Membre du Club
    Homme Profil pro
    Enseignant
    Inscrit en
    novembre 2018
    Messages
    53
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Enseignant

    Informations forums :
    Inscription : novembre 2018
    Messages : 53
    Points : 41
    Points
    41
    Par défaut
    Ca marche :-) Merci pour ton aide.
    Sylvain

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 5
    Dernier message: 08/11/2008, 20h26
  2. [SQL Server 05] Je cherche une table des communes de France
    Par Monkey_D.Luffy dans le forum MS SQL Server
    Réponses: 6
    Dernier message: 28/05/2008, 14h00
  3. [Conception] Info des communes environnantes
    Par bibiseal dans le forum PHP & Base de données
    Réponses: 1
    Dernier message: 28/11/2006, 09h46
  4. Cherche table des communes de France et table des codes NAF
    Par grandmaitrezen dans le forum SQL Procédural
    Réponses: 2
    Dernier message: 09/08/2004, 14h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo