Autocomplete avec jQuery
Résolu
Heryu
Messages postés
567
Date d'inscription
Statut
Membre
Dernière intervention
-
Heryu Messages postés 567 Date d'inscription Statut Membre Dernière intervention -
Heryu Messages postés 567 Date d'inscription Statut Membre Dernière intervention -
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
JSON
Avez-vous une idée du problème ?
Merci d'avance =)
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 =)
4 réponses
Merci de ta réponse.
Le contenu du JSON est juste en dessous du code HTML que j'ai donné plus haut :
JSON
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"
}
]}
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
JSON (_json_products_list.php)
Merci d'avance si quelqu'un a une idé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 ^^
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 });
}
});
