jQuery autocompletar con callback ajax json

Estoy tratando de encontrar una manera de utilizar la función de autocompletar jQuery con la fuente de devolución de datos a través de una lista de objetos ajax json del servidor.

¿Alguien podría dar algunas indicaciones?

Busqué en Google pero no pude encontrar una solución completa.

Perfectamente buen ejemplo en los documentos Autocompletar con código fuente.

jQuery

 

HTML

 
Powered by geonames.org
Result:

Si devuelve un objeto json complejo, debe modificar la función de éxito de su autocompletado de la siguiente manera.

 $.ajax({ url: "/Employees/SearchEmployees", dataType: "json", data: { searchText: request.term }, success: function (data) { response($.map(data.employees, function (item) { return { label: item.name, value: item.id }; })); } }); 

Mi problema era que los usuarios finales comenzarían a escribir en un cuadro de texto y recibir sugerencias de autocompletar (ACP) y actualizar el control de llamadas si se seleccionaba una sugerencia ya que el ACP está diseñado de manera predeterminada. Sin embargo, también necesitaba actualizar muchos otros controles (cuadros de texto, DropDowns, etc.) con datos específicos para la selección del usuario final. He estado tratando de encontrar una solución elegante al problema y creo que la que desarrollé vale la pena compartir y espero que pueda ahorrarle al menos un tiempo.

WebMethod (SampleWM.aspx):

  • PROPÓSITO:

    • Para capturar los resultados del Procedimiento almacenado de SQL Server y devolverlos como una cadena JSON a la persona que llama AJAX
  • NOTAS:

    • Data.GetDataTableFromSP () – Es una función personalizada que devuelve una DataTable de los resultados de un Procedimiento almacenado
    • _
    • Función pública compartida GetAutoCompleteData (ByVal QueryFilterAs String) como cadena

  //Call to custom function to return SP results as a DataTable // DataTable will consist of Field0 - Field5 Dim params As ArrayList = New ArrayList params.Add("@QueryFilter|" & QueryFilter) Dim dt As DataTable = Data.GetDataTableFromSP("AutoComplete", params, [ConnStr]) //Create a StringBuilder Obj to hold the JSON //IE: [{"Field0":"0","Field1":"Test","Field2":"Jason","Field3":"Smith","Field4":"32","Field5":"888-555-1212"},{"Field0":"1","Field1":"Test2","Field2":"Jane","Field3":"Doe","Field4":"25","Field5":"888-555-1414"}] Dim jStr As StringBuilder = New StringBuilder //Loop the DataTable and convert row into JSON String If dt.Rows.Count > 0 Then jStr.Append("[") Dim RowCnt As Integer = 1 For Each r As DataRow In dt.Rows jStr.Append("{") Dim ColCnt As Integer = 0 For Each c As DataColumn In dt.Columns If ColCnt = 0 Then jStr.Append("""" & c.ColumnName & """:""" & r(c.ColumnName) & """") Else jStr.Append(",""" & c.ColumnName & """:""" & r(c.ColumnName) & """") End If ColCnt += 1 Next If Not RowCnt = dt.Rows.Count Then jStr.Append("},") Else jStr.Append("}") End If RowCnt += 1 Next jStr.Append("]") End If //Return JSON to WebMethod Caller Return jStr.ToString 

AutoComplete jQuery (AutoComplete.aspx):

  • PROPÓSITO:
    • Realice la solicitud Ajax al WebMethod y luego maneje la respuesta

  $(function() { $("#LookUp").autocomplete({ source: function (request, response) { $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "SampleWM.aspx/GetAutoCompleteData", dataType: "json", data:'{QueryFilter: "' + request.term + '"}', success: function (data) { response($.map($.parseJSON(data.d), function (item) { var AC = new Object(); //autocomplete default values REQUIRED AC.label = item.Field0; AC.value = item.Field1; //extend values AC.FirstName = item.Field2; AC.LastName = item.Field3; AC.Age = item.Field4; AC.Phone = item.Field5; return AC })); } }); }, minLength: 3, select: function (event, ui) { $("#txtFirstName").val(ui.item.FirstName); $("#txtLastName").val(ui.item.LastName); $("#ddlAge").val(ui.item.Age); $("#txtPhone").val(ui.item.Phone); } }); }); 

 $(document).on('keyup','#search_product',function(){ $( "#search_product" ).autocomplete({ source:function(request,response){ $.post("",{'name':$( "#search_product" ).val()}).done(function(data, status){ response(JSON.parse(data)); }); } }); }); 

Código PHP:

 public function autocomplete(){ $name=$_POST['name']; $result=$this->db->select('product_name,sku_code')->like('product_name',$name)->get('product_list')->result_array(); $names=array(); foreach($result as $row){ $names[]=$row['product_name']; } echo json_encode($names); }