jQuery Girl
  1. jQuery Girl
  3. Ajax / Jquery Autocomplete avec des données JSON
Intereting Posts
sortinger le tableau par colonne de prix Comment puis-je utiliser preg_match dans jQuery? Asp net grid view sélectionnez row à l’aide de jquery ajax POST n’envoie pas de partie d’object jquery flot graphique à barres plusieurs séries Appel de .load () avec les sélecteurs ne fonctionnant pas Comment faire pour que ce texte jQuery disparaisse? Basculer la classe avec jQuery Ajouter un contour au sharepoint données SVG dans chartist.js net :: ERR_INSECURE_RESPONSE lors de la requête ajax depuis node-webkit Indexer des éléments de page en object JSON? Ou jQuery le sélecteur à chaque fois? Détecter un élément s’il est placé sur un autre élément via CSS3 Transform Le gestionnaire d’événements tactiles annule les gestionnaires de clics Analyse XML JQuery: Remplacement de balises Recadrage avec drawImage ne fonctionne pas dans Safari

Ajax / Jquery Autocomplete avec des données JSON

J’essaie de configurer mon champ de saisie semi-automatique de l’interface utilisateur Jquery pour qu’il contienne des données provenant d’une connexion ajax. Voici mon code jusqu’à présent: 

$("#mainIngredientAutoComplete").autocomplete({ source: function (request, response) { $.ajax({ url: "../api/IngredientChoices", dataType: "json", success: function (data) { response(function (item) { return { label: item.MainName, value: item.MainItemID } }); } }); } });

C’est mon JSON: 

 [{"SubItemID":1,"MainItemID":1,"SubName":"2%","MainName":"Milk"},{"SubItemID":2,"MainItemID":1,"SubName":"Skim/Fat Free","MainName":"Milk"},{"SubItemID":3,"MainItemID":2,"SubName":"Chedder","MainName":"Cheese"}]

HTML: 

 
 
 Ingredient Measurement Amount

Quand je commence à taper “mil” (pour le lait), mon code me donne cette erreur:

entrez la description de l'image ici

MODIFIER:

J’ai fait votre changement, qui a fonctionné plusieurs fois, mais je reçois maintenant une nouvelle erreur –

Exception non gérée à la ligne 55, colonne 25 dans [URL]

0x800a1391 – Erreur d’exécution Microsoft JScript: “données” n’est pas défini 

  $("#mainIngredientAutoComplete").autocomplete({ source: function (request, response) { $.ajax({ url: "../api/IngredientChoices", dataType: "json", response: ($.map(data, function(v,i){ return { label: v.MainName, value: v.MainItemID }})) }); } });

Vous devez changer le rappel de succès en 

 response($.map(data, function(v,i){ return { label: v.MainName, value: v.MainItemID }; }));

Violon .

Le fichier jQuery.map permet de convertir tous les éléments d’un tableau ou d’un object en un nouveau tableau d’éléments.

Mise à jour: Ajouter un filtre 

 $("#mainIngredientAutoComplete").autocomplete({ source: function (request, response) { var matcher = new RegExp( $.ui.autocomplete.escapeRegex(request.term), "i" ); $.ajax({ url: "../api/IngredientChoices", dataType: "json", success: function (data) { response($.map(data, function(v,i){ var text = v.MainName; if ( text && ( !request.term || matcher.test(text) ) ) { return { label: v.MainName, value: v.MainItemID }; } })); } }); } });