¿Qué aspecto tiene la solicitud de autocompletar / respuesta del servidor?

Esto parece ser un agujero negro: después de una hora de buscar en el sitio web de jQuery UI , Stack Overflow y googlear, todavía tengo que encontrar la información más básica sobre cómo escribir el lado del servidor de Autocompletar.

¿Qué parámetro se pasa al servidor y cómo debería ser la respuesta JSON?

Debo extrañar algo, porque ¿cómo aprendieron todos a hacer esto? Los sitios solo parecen discutir el código JavaScript del lado del cliente y nunca el protocolo o ejemplos del lado del servidor.

Necesito lo suficiente para que funcione el ejemplo remoto más simple.

Qué parámetro se pasa al servidor

request.term pasar request.term a su código del lado del servidor (de la documentación):

Un objeto de solicitud, con una única propiedad llamada “término”, que se refiere al valor actualmente en la entrada de texto.

Básicamente, en tu código de autocomplete , tendrás algo como esto:

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

y ¿cómo debería ser la respuesta JSON?

El widget de autocomplete espera una matriz de objetos JSON con propiedades de label y value (aunque si solo especifica el value , se usará como etiqueta). Entonces, en el caso más simple, puede simplemente devolver datos que se ve así:

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

Si necesita algo más complicado, puede usar el argumento de success de la función $.ajax para normalizar los datos que obtiene antes de que la autocompleta lo obtenga:

 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 } })); } }); 

Este código se toma del ejemplo aquí (este es un buen ejemplo general de ajax + autocompletar funciona en un escenario más complejo).

Básicamente, lo que sucede es que tras una solicitud de Ajax exitosa, los datos recibidos se normalizan (utilizando $.map ) a lo que espera el widget de autocompletar.

Espero que ayude.

Además de la respuesta perfecta de Andrew Whitaker, un método alternativo a $ .map es anular el renderizador, un ejemplo de lo cual se muestra en la página de demostración de jQuery UI.

He utilizado esta funcionalidad usando una llamada JSON como esta:

Respuesta 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); };

    En este ejemplo, la función _renderItem se reemplaza para que la lista de resultados de búsqueda (es decir, la lista que aparece debajo del cuadro de texto) se complete utilizando atributos de los registros que recuperé de la respuesta JSON.

    Si bien no es tan simple, le permite realizar algunas cosas bastante interesantes (utilizando múltiples bits de datos de una respuesta JSON, por ejemplo)

    Ambas respuestas hasta ahora son complejas y engañosas, una comprensión clave para jQuery UI Auto Complete es la función anónima de éxito, usted tiene apalancamiento / control del formato de su respuesta JSON del lado del servidor debido a la exitosa callback de Autocompletar. El formato de la etiqueta y el valor es bueno para seguir, pero puede definir cualquier formato JSON que desee, la clave es cómo define su función de éxito:

       $("#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 } })); } }); } }); 

    Controlador 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()); } 

    Aquí vemos un enlace autocompletado muy estándar con un backend de ASP.NET.

    Puede devolver cualquier formato de JSON que desee del lado del servidor, siempre que lo asigne correctamente en la callback anónima de Autocompletar. La etiqueta, el par de valor del nombre del valor es lo suficientemente bueno para la mayoría de los requisitos, pero haz lo que quieras con tu servidor JSON, simplemente correlaciona correctamente en la callback con éxito de Autocompletar.

    No es necesario que modifique la secuencia de comandos del lado del servidor para utilizar la autocompletar de jQuery UI. Puede especificar una función de JavaScript como source para crear solicitudes personalizadas (por ejemplo, usar POST o GET, usar parámetros de cadena de consulta que el script del lado del servidor espera) y manejar respuestas arbitrarias (por ejemplo, manejar respuestas XML).

    Habiendo dicho eso, cuando usas una cadena como el parámetro source , entonces:

    […] el complemento Autocompletar espera que esa cadena apunte a un recurso URL que devolverá los datos JSON. Puede estar en el mismo host o en otro diferente (debe proporcionar JSONP). El complemento Autocompletar no filtra los resultados, en su lugar se agrega una cadena de consulta con un campo de término , que el script del lado del servidor debe usar para filtrar los resultados. Por ejemplo, si la opción fuente está configurada en http://example.com y el usuario escribe foo, se realizará una solicitud GET a http://example.com?term=foo . Los datos en sí pueden tener el mismo formato que los datos locales descritos anteriormente.

    Con respecto a “Los datos en sí pueden tener el mismo formato que los datos locales descritos anteriormente” , funcionarán los siguientes formatos JSON (o JSONP):

     // no matching entries [] // array of strings [ "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 }] 

    Para las matrices de objetos, puede especificar propiedades adicionales además de la etiqueta y / o el value . Todas las propiedades estarán disponibles dentro de las devoluciones de llamada.

    El siguiente código me funciona. Esto necesita datos json codificados para funcionar. Una vez que obtenemos los datos, los modifica de acuerdo con el formato de autocompletado jQuery y también habilita la selección

     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