A quoi ressemble la réponse à la demande / serveur autocomplete?

Cela semble être un trou noir: après une heure de recherche sur le site Web de l’ interface utilisateur jQuery , Stack Overflow et Google, je n’ai pas encore trouvé les informations les plus élémentaires sur la façon d’écrire le côté serveur de la saisie semi-automatique.

Quel paramètre est transmis au serveur et à quoi devrait ressembler la réponse JSON?

Je dois manquer quelque chose, car comment les autres ont-ils appris à faire cela? Les sites semblent ne discuter que du code JavaScript côté client et jamais des exemples de protocole ou côté serveur.

J’ai besoin de suffisamment pour obtenir l’exemple le plus simple de travail à distance.

Quel paramètre est transmis au serveur

Vous devez transmettre request.term à votre code côté serveur (à partir de la documentation):

Un object de requête, avec une propriété unique appelée “term”, qui fait référence à la valeur actuellement présente dans le texte.

Fondamentalement, dans votre code de autocompleteautocomplete , vous aurez quelque chose comme ceci:

 $("#autocomplete").autocomplete({ // request.term needs to be passed up to the server. source: function(request, response) { ... } }); 

et à quoi devrait ressembler la réponse JSON?

Le widget de autocomplete attend un tableau d’objects JSON avec des propriétés label et value (bien que si vous spécifiez simplement une value , il sera utilisé comme étiquette). Donc, dans le cas le plus simple, vous pouvez simplement renvoyer des données qui ressemblent à ceci:

 [ { label: 'C++', value: 'C++' }, { label: 'Java', value: 'Java' } { label: 'COBOL', value: 'COBOL' } ] 

Si vous avez besoin de quelque chose de plus compliqué, vous pouvez utiliser l’argument de success de la fonction $.ajax pour normaliser les données que vous recevez avant que l’autocomplétion ne les obtienne:

 source: function( request, response ) { $.ajax({ /* Snip */ success: function(data) { response($.map( data.geonames, function( item ) { return { label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName, value: item.name } })); } }); 

Ce code est tiré de l’exemple présenté ici (Ceci est un bon exemple général des travaux ajax + autocomplete dans un scénario plus complexe).

Fondamentalement, ce qui se passe, c’est que lors d’une requête ajax réussie, les données reçues sont en cours de normalisation (en utilisant $.map ) en fonction des $.map du widget de saisie semi-automatique.

J’espère que cela pourra aider.

En plus de la réponse parfaite d’Andrew Whitaker, une méthode alternative à $ .map consiste à remplacer le moteur de rendu, dont un exemple est présenté sur la page de démonstration de l’interface utilisateur jQuery.

J’ai utilisé cette fonctionnalité en utilisant un appel JSON comme ceci:

Réponse JSON

 { "Records": [ { "WI_ID": "1", "Project": "ExampleProject", "Work_Item": "ExampleWorkItem", "Purchase_Order": "", "Price": "", "Comments": "", "Quoted_Hours": "", "Estimated_Hours": "", "Achieved": "False", "Used_Hours": "0" } ] } 

jQuery

 $("#WorkItem").autocomplete({ source: function(request, response){ $.ajax({ type: "POST", url: "ASPWebServiceURL.asmx/WorkItems", data: "{'Project_ID':'1'}", contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { response($.parseJSON(msg.d).Records); }, error: function (msg) { alert(msg.status + ' ' + msg.statusText); } }) }, select: function (event, ui) { $("#WorkItem").val(ui.item.Work_Item); return false; } }) .data("autocomplete")._renderItem = function (ul, item) { return $("
  • ") .data("item.autocomplete", item) .append("" + item.Work_Item + "") .appendTo(ul); };

    Dans cet exemple, la fonction _renderItem est remplacée de sorte que la liste des résultats de la recherche (c.-à-d. La liste qui apparaît sous la zone de texte) soit remplie à l’aide des atsortingbuts des enregistrements extraits de la réponse JSON.

    Bien que ce ne soit pas aussi simple, il vous permet d’extraire des éléments très intéressants (en utilisant plusieurs bits de données à partir d’une réponse JSON, par exemple).

    Jusqu’à présent, les deux réponses sont complexes et trompeuses. Une fonctionnalité clé de jQuery UI Auto Complete est la fonction anonyme de réussite. Vous disposez d’un effet de levier / contrôle du format de votre réponse JSON côté serveur à cause du rappel automatique. L’étiquette, format de valeur est un bon à suivre, mais vous pouvez définir n’importe quel format JSON que vous souhaitez, la clé est la façon dont vous définissez votre fonction de réussite:

       $("#refPaymentTerms").autocomplete({ source: function (request, response) { $.ajax({ type: "POST", url: "/admin/JobPaymentRefs", dataType: "json", data: { term: request.termCode }, error: function (xhr, textStatus, errorThrown) { alert('Error: ' + xhr.responseText); }, success: function (data) { response($.map(data, function (item) { return { label: item.label, value: item.value } })); } }); } }); 

    Contrôleur MVC:

     public JsonResult JobPaymentRefs() { var query = from REFTerm in _db.REFTerms select new { label = REFTerm.TermCode, value = REFTerm.TermCode }; //var refTerms = _db.REFTerms.Select(x => x.TermCode); return Json(query.ToArray()); } 

    Nous voyons ici une liaison automatique complète très standard avec un backend ASP.NET.

    Vous pouvez renvoyer le format JSON souhaité côté serveur tant que vous le mappez correctement dans le rappel anonyme de saisie semi-automatique. L’étiquette, valeur paire de valeurs de nom est assez bon pour la plupart des exigences, mais faites comme vous le côté serveur avec votre JSON juste le mapper correctement dans le rappel de réussite de la saisie semi-automatique.

    Vous n’êtes pas obligé de modifier le script côté serveur pour utiliser l’auto-complétion de l’interface utilisateur jQuery. Vous pouvez spécifier une fonction JavaScript comme source pour créer des requêtes personnalisées (par exemple, utiliser POST ou GET, utiliser les parameters de chaîne de requête attendus par le script côté serever) et gérer des réponses arbitraires (par exemple, gérer les réponses XML).

    Cela dit, lorsque vous utilisez une chaîne comme paramètre source , alors:

    […] le plug-in Autocomplete s’attend à ce que cette chaîne pointe vers une ressource URL qui renverra des données JSON. Il peut être sur le même hôte ou sur un autre (doit fournir JSONP). Le plug-in Autocomplete ne filtre pas les résultats, à la place une chaîne de requête est ajoutée avec un champ term , que le script côté serveur doit utiliser pour filtrer les résultats. Par exemple, si l’option source est définie sur http://example.com et que l’utilisateur saisit foo, une demande GET sera envoyée à http://example.com?term=foo . Les données elles-mêmes peuvent avoir le même format que les données locales décrites ci-dessus.

    Concernant “Les données elles-mêmes peuvent être au même format que les données locales décrites ci-dessus” , les formats JSON (ou JSONP) suivants fonctionneront:

     // no matching ensortinges [] // array of ssortingngs [ "Option 1", "Option 2" ] // array of objects with label property [{ "label": "Option 1" }, { "label": "Option 2" }] // array of objects with value property [{ "value": "Option 1" }, { "value": "Option 2" }] // array of objects with label and value properties [{ "label": "Option 1", "value": 1 }, { "label": "Option 2", "value": 2 }] 

    Pour les tableaux d’objects, vous êtes libre de spécifier des propriétés supplémentaires en plus de l’étiquette et / ou de la value . Toutes les propriétés seront disponibles dans les rappels.

    Le code suivant fonctionne pour moi. Cela nécessite des données codées json pour fonctionner. Une fois que nous obtenons des données, elles le modifient selon le format de saisie semi-automatique jQuery et permettent également la sélection

     var $url = "http://some-url/get-json"; //name is the id of the textbox where autocomplete needs to be shown $('#name').autocomplete( { source: function(request,response) { //gets data from the url in JSON format $.get($url, function(data) { obj = JSON.parse(data); //parse the data in JSON (if not already) response($.map(obj, function(item) { return { label: item.full_name, value: item.full_name, id:item.id, email:item.email, phone:item.phone, } } )); //end response }); //end get }, select:function(event, ui) { console.log(ui.item.full_name); console.log(ui.item.email); } }); //end of autocomplete 
         jQuery UI Autocomplete - Categories         enter code here