autocomplete de jQuery com callback ajax json

Eu estou tentando encontrar uma maneira de usar autocomplete jQuery com fonte de retorno de chamada, obtendo dados através de uma lista de objects ajax json do servidor.

Alguém poderia dar algumas instruções?

Eu pesquisei mas não consegui encontrar uma solução completa.

Perfeitamente bom exemplo nos documentos de preenchimento automático com código-fonte.

jQuery

 

HTML

 
Powered by geonames.org
Result:

Se você estiver retornando um object json complexo, precisará modificar a function de sucesso do seu preenchimento automático da seguinte maneira.

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

Meu problema era que os usuários finais começariam a digitar em uma checkbox de texto e receber sugestões de preenchimento automático (ACP) e atualizar o controle de chamada se uma sugestão fosse selecionada, pois o ACP é projetado por padrão. No entanto, eu também precisava atualizar vários outros controles (checkboxs de texto, DropDowns, etc …) com dados específicos para a seleção do usuário final. Eu tenho tentado descobrir uma solução elegante para o problema e eu sinto que o que eu desenvolvi vale a pena compartilhar e espero que você vai economizar pelo menos algum tempo.

WebMethod (SampleWM.aspx):

  • OBJETIVO:

    • Para capturar os resultados do SQL Server Stored Procedure e retorná-los como uma string JSON ao AJAX Caller
  • NOTAS:

    • Data.GetDataTableFromSP () – É uma function personalizada que retorna um DataTable dos resultados de um procedimento armazenado
    • _
    • Função Compartilhada Pública GetAutoCompleteData (ByVal QueryFilterAs String) Como String

  //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 

JQuery AutoComplete (AutoComplete.aspx):

  • OBJETIVO:
    • Execute o pedido Ajax para o WebMethod e, em seguida, manipule a resposta

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