jQuery UI autocomplete avec JSON à partir d’une URL

J’utilise la fonction de saisie semi-automatique de l’interface utilisateur jQuery. Je peux le faire fonctionner avec l’exemple fourni avec l’interface utilisateur jQuery comme ceci:

var availableTags = [ "ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme" ]; $("#tags").autocomplete({ source: availableTags }); 

Cela fonctionne sans aucun problème. Mais je dois utiliser JSON comme source de données qui peut être récupérée comme suit : http: //mysite.local/services/suggest.ashx? Query = ball

Si je vais à cette URL je récupère JSON comme ceci:

  [{"id":12,"phrase":"Ball"},{"id":16,"phrase":"Football"},{"id":17,"phrase":"Softball"}] 

Comment utiliser mon URL en tant que source de données?

J’ai essayé de changer l’option source comme ceci:

 $("#tags").autocomplete({ source: "http://mysite.local/services/suggest.ashx" }); 

Mais ça n’aide pas. Je suppose que le service ne sait pas quel mot-clé a été saisi dans le champ de saisie ou à peu près?

Tous les indicateurs seraient formidables.

Vous devez modifier votre source pour respecter les spécifications suivantes (décrites dans la documentation du widget). La source doit être un tableau contenant (ou retourne un tableau contenant):

  • Des chaînes simples, ou:
  • objects contenant une propriété label , une propriété value ou les deux.

Si, pour une raison quelconque, vous ne pouvez pas modifier le contenu renvoyé par votre source distante, vous pouvez transformer les données une fois qu’elles ont été récupérées. Voici comment vous feriez cela:

 $("#tags").autocomplete({ source: function (request, response) { $.ajax({ url: "http://mysite.local/services/suggest.ashx", data: { query: request.term }, success: function (data) { var transformed = $.map(data, function (el) { return { label: el.phrase, id: el.id }; }); response(transformed); }, error: function () { response([]); } }); }); }); 

Comme vous pouvez le constater, vous devez appeler vous-même AJAX en transmettant une fonction à l’option source du widget.

L’idée est d’utiliser $.map pour transformer votre tableau en un tableau contenant des éléments que le widget autocomplétable peut parsingr.

Notez également que le paramètre data transmis à l’appel AJAX doit se terminer par ?query= lorsque l’utilisateur tape un terme