AutoComplete jQuery Utilisation de données JSON

Imaginez un fichier json avec les données suivantes:

[ { color: "red", value: "#f00" }, { color: "green", value: "#0f0" }, { color: "blue", value: "#00f" }, { color: "cyan", value: "#0ff" } ] 

En utilisant la méthode autocomplete de jQuery, je souhaite qu’elle puisse afficher la couleur en tant qu’options pour sélectionner et insérer une valeur dans une entrée.

    

Ce qui précède n’a pas besoin d’introductions. Sélecteur pour la recherche sur les couleurs, input.color avec valeur de couleur et input.value avec valeur.

EDIT: J’ai ces données JSON:

 [{ "label": "Sec\u00e7\u00e3o 1", "value": "1" }, { "label": "Sec\u00e7\u00e3o 2", "value": "2" }, { "label": "Sec\u00e7\u00e3o 3", "value": "3" }, { "label": "Sec\u00e7\u00e3o 4", "value": "4" }] 

et ce HTML:

   

et ce jQuery:

 $(document).ready(function(){ $("#name").autocomplete({ source: "json.php", select: function (event, ui) { $("#name").val(ui.label); $("#value").val(ui.value); } }); }); 

J’ai suivi la réponse d’Andrew et cela m’a ui.label à sélectionner les données, mais si ui.value variables ui.label et ui.value , le ui.value “non défini”. Qu’est-ce que je rate?

Edit2: Disons que j’ai ce code HTML:

     

Est-il possible de gérer plusieurs sélecteurs avec la même méthode .autocomplete() ? Comme, sélectionnez l’étiquette que je veux en utilisant input.name et ne mettez à jour que input.value côté?

[input.name] [input.value]
^ Je sélectionne ^ met à jour le
une valeur d’étiquette à côté
[input.name] [input.value]
^ ça rest intact ^

Utilisation d’une source de données distante:

 $("#selector").autocomplete({ source: function (request, response) { $.ajax({ url: "my_server_side_resource.php", type: "GET", data: request, success: function (data) { response($.map(data, function (el) { return { label: el.color, value: el.value }; })); } }); }, select: function (event, ui) { // Prevent value from being put in the input: this.value = ui.item.label; // Set the next input's value to the "value" of the item. $(this).next("input").val(ui.item.value); event.preventDefault(); } }); 

Modifiez l’appel $.ajax au besoin. Cet exemple va générer des requêtes sur votre ressource PHP qui ressemblent à ceci:

mon_serveur_side_ressource.php? term = xyz

Si vous avez le contrôle sur votre code côté serveur, vous pouvez modifier les données renvoyées de la manière suivante:

 [ { label: "red", value: "#f00" }, /* etc */ ] 

Vous pouvez simplement utiliser une chaîne, le nom de votre ressource côté serveur en tant que source :

 $("#selector").autocomplete({ source: "my_server_side_resource.php", select: /* same as above */ }); 

Consultez l’ exemple avec JSONP distant avec un exemple complet utilisant une ressource côté serveur.

Edit: Voir cet exemple pour une démonstration fonctionnant à l’aide de données locales: http://jsfiddle.net/SMxY6/

Vous devez modifier votre object JSON pour utiliser la propriété “label”. De la docs:

Un tableau d’objects avec les propriétés label et value: [{label: “Choice1”, valeur: “value1”}, …]

La propriété label est affichée dans le menu de suggestion. La valeur sera insérée dans l’élément d’entrée après que l’utilisateur ait sélectionné quelque chose dans le menu. Si une seule propriété est spécifiée, elle sera utilisée pour les deux, par exemple. si vous ne fournissez que des propriétés de valeur, la valeur sera également utilisée comme étiquette.

Ensuite, vous devez définir les valeurs des autres champs de texte lorsque les événements “change” ou “select” sont déclenchés.

Après des heures de travail .. Enfin réussi. La chose est que j’ai un tableau JSON composé de nombreux objects JSON. Chaque object json a un nom de banque et son code ifsc.Utilisateur requirejs pour taper une banque et filtrer les lignes de détails d’une banque de la firebase database. Lors de la sélection de cette banque … j’avais 2 champs de saisie, l’un pour la banque et l’autre pour le code ifsc. Je sélectionne le nom de la banque et le code ifsc correspondant s’affiche. Donc voici comment je l’ai fait: –


  


mon tableau json = [{label: "banque d'état de l'Inde", valeur: "SBIN00076"}, {label: "ICICI Bank", valeur: "ICIC001"}, ..]