Qué parámetro se pasa al servidor

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

Un objeto de solicitud, con una sola propiedad llamada "término", que se refiere al valor actualmente en la entrada de texto.

Básicamente, en su código de autocomplete , tendrá 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 value , se usará como etiqueta). Entonces, en el caso más simple, puede devolver datos que se ven 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 los obtenga el autocompletado:

 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 ajax exitosa, los datos recibidos se normalizan (usando $.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 del cual se muestra en la página de demostración de jQuery UI.

He usado esta funcionalidad usando una llamada JSON así:

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 $("<li></li>") .data("item.autocomplete", item) .append("<a>" + item.Work_Item + "</a>") .appendTo(ul); };

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

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

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

 <input id="refPaymentTerms" class="form-control"> $("#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 completo automático muy estándar con un backend ASP.NET.

Puede devolver cualquier formato de JSON que desee del lado del servidor siempre que lo asigne correctamente en la devolución de llamada anónima de Autocompletar. La etiqueta, el par de valor de nombre de valor es lo suficientemente bueno para la mayoría de los requisitos, pero haga lo que haga en el lado del servidor con su JSON, simplemente mapéelo correctamente en la devolución de llamada exitosa de Autocompletar.