Autocomplete avec jQuery Résolu

Question

Bonjour à tous,   

J'essaye de réaliser un Autocomplete avec jQuery en utilisant un fichier JSON.   

J'arrive à faire le lien entre l'autocomplete et le fichier mais le problème est que, qu'importe ce que je tape, il me sort tous les résultats...   

Exemple : normalement, si je tape 'web', il devrait me sortir 'webmaster', bah la il m'affiche absolument tout, 'chaussette', 'voiture'...   

Voici mon code :   

HTML / Javascript   


$( "#prods_list" ).autocomplete({   
 source: function(request, response) {   
  $.ajax({   
   url: "[_json_products_list.php]",   
   dataType: "json",   
   success: function( data ) {   
    response( $.map( data.products, function( item ) {   
     return {   
      label: item.famille + ' - ' + item.name,   
      value: item.name   
     }   
    }));   
   }   
  });   
 }   
});   



JSON   


{"products":[    

{   
"famille":"Accessoires",   
"name":"Lot de 10 Sachets de 50 Protèges-cartes"   
},    

{   
"famille":"Accessoires!",   
"name":"Classeur"   
}    

]}   




Avez-vous une idée du problème ?   

Merci d'avance =)

xylo · Answer

salut, 

on pourrait voir _json_products_list.php ? c'est le plus important .

Heryu · Answer

Merci de ta réponse. 

Le contenu du JSON est juste en dessous du code HTML que j'ai donné plus haut : 

JSON  


{"products":[     

{    
"famille":"Accessoires",    
"name":"Lot de 10 Sachets de 50 Protèges-cartes"    
},     

{    
"famille":"Accessoires!",    
"name":"Classeur"    
}     

]}

Heryu · Answer

J'ai trouvé une alternative qui fonctionne parfaitement, mais cette méthode permet de faire une recherche sur des elements commençant par la string recherchée.

J'aurais préféré que ça recherche n'importe où dans le texte, que si je tape voi, qu'il ne me sorte pas que Voiture mais Avoine etc.

Voici le code que j'ai utilisé :

Javascript

$.ajax({ // Requete ajax        
           
 type: "POST", // envoie en POST        
 url: "_json_products_list.php", // url cible du script PHP        
 async: true, // mode asynchrone        
 data: "", // données envoyées        

 success: function(xml) { // Lorsque le PHP à renvoyé une réponse        
 var elementsArray = new Array();        

 $(xml).find('element').each(function() { // pour chaque "element"        
 elementsArray.push($(this).text()); // ajout dans le tableau        
 });        

 $("#prods_list").autocomplete(elementsArray);      
 }        

});

JSON (_json_products_list.php)

header ("content-type: text/xml");        

echo "<root>        
<element>Avoine</element>        
<element>Voiture</element>        
</root>";

Merci d'avance si quelqu'un a une idée ^^

Heryu · Answer

J'ai trouvé la solution en rajoutant un matchContains: true, afin que mon javascript donne :    

$.ajax({ // Requete ajax    

 type: "POST", // envoie en POST    
 url: "js/autocomplete/_json_products_list.php", // url cible du script PHP    
 async: true, // mode asynchrone    
 data: "", // données envoyées    
 success: function(xml) { // Lorsque le PHP à renvoyé une réponse    
 var elementsArray = new Array();    
      
 $(xml).find('element').each(function() { // pour chaque "element"    
 elementsArray.push($(this).text()); // ajout dans le tableau    
});    
    
$("#prods_list").autocomplete(elementsArray, { 
 width: 600, 
 matchContains: true, 
 selectFirst: false }); 
}    

});

Autocomplete avec jQuery

4 réponses

Discussions similaires

Newsletters