[Résolu]JQuery ui autocomplete

Bonjour,

J'utilise jQuery UI autocomplete. J'aimerais savoir comment fait-on pour récupérer la sélection.

Je m'explique:

Après avoir sélectionné un mot dans la liste générée par le widget, je voudrais faire une nouvelle requête à la base de donnée afin de récupérer la définition de ce mot.

Voici le code:

<script>
  $(function() {
	  $( "#article" ).autocomplete({
          
		  source: function(request, response) {
                      
                    $.ajax({
                      url: "cherche_mot1.php",
                      data: request,
                      dataType: "json",
                      type: "POST",
                      success: function(data){
                          response(data);
                      		}
                    	});
                  	},
              
		select: function( event, ui) {
			
           
				}
		
          	});
	});
  </script>

Je bloque au niveau de :

select: function( event, ui) {
			
           }

Merci d'avance!
Modifié par lieneb (04 Apr 2012 - 13:52)

Un truc du genre :

select: function( event, ui) {
	$.ajax(
                      url: "cherche_mot1.php",
                      data: ???,
                      type: "POST",
                      success: function(data){
                            /*...*/
                      		}
                    	});
	);
 }

Le ??? doit contenir l'entrée sélectionnée, elle doit être fournie dans le event ou dans ui.

Merci pour ta réponse.

J'ai du mal à te suivre. J'ai très peu de connaissances en Javascritpt.

Je ne sais pas comment récupérer le mot sélectionné dans "ui".

Ensuite, que dois-je mettre dans:

success: function(data){

                            /*...*/

                      		}

J'ai essayé de chercher dans la documentation de jQuery ui, mais je dois avouer que je ne m'en sors pas.

Pourrais-tu m'aiguiller un peu?

Merci!

Et bien, je ne connais pas tous les paramètres de toutes les méthodes, callback de toutes les extensions de jQuery. Et en codage mieux vaut ne pas ruiner son temps et son cerveau à vouloir tout savoir.

Si j'étais dans ton cas, je commencerai par regarder ce qu'il y a dans ui avec un simple alert :

select: function( event, ui) {
    alert('type : '+typeof(ui)+'\ncontenu : '+ui);
}

Tu obtiendra quelque chose du style :

a écrit :
type : string
contenu : blabla

Ou un type array, function, que sais-je encore. Et là, t'en sauras un peu plus. Pour les objets (comme event), on peut examiner le contenu comme ceci :

var m='';
for(var i in event)
    m+=i+' : '+event[i]+'\n';
alert(m);

Là on obtient par exemple :

a écrit :
pageX : 12
pageY : 123
button : 3
stopPropagation : function (){ [native Code] }
etc.

Attention si le code se trouve dans une boucle à remplacer alert par un innerHTML ou truc du genre.

Il y aura probablement dans tout ça le contenu de l'autocomplete.[/i]

Merci pour tes réponses.

J'ai essayé ce que tu m'as écrit:

select: function( event, ui) {

    alert('type : '+typeof(ui)+'\ncontenu : '+ui);

}

Là, j'obtiens:

type : object
contenu : object Object

De mon côté, j'ai essayé ceci:

select: function(event, ui){
   
          var word  = ui.item.label;
		       
       }

Je récupère le mot sélectionné dans la variable word.

Après, j'ai essayé de faire une nouvelle requête Ajax à partir de ta première réponse, mais sans succès.

Pourrais-tu me la réexpliquer avec plus de détails?

Merci beaucoup!!
Modifié par lieneb (03 Apr 2012 - 23:23)

Bonjour,

Finalement, j'ai trouvé comment faire la 2ème requête après avoir récupérer la sélection.

Merci pour vos réponses.

Voici le code pour ceux que ça pourrait intéresser:

<script>
  $(function() {
	  $( "#article" ).autocomplete({
          
		  source: function(request, response) {
                      $.ajax({
                          url: "cherche_mot1.php",
		          data: request,
		          dataType: "json",
                          type: "POST",
                          success: function(data){
                            response(data);
                            }
		      });
                  },
              
		  select: function(event, ui){
		      $.ajax({
                          url: "cherche_definition.php",
			  data: {"word": ui.item.label},
		          dataType: "html",
                          type: "POST",
                          success: function(data){
                            $("#definition").html(data);
			    }
                      	});
		   }
	      });
	})
  </script>