jQuery completamento automatico con callback ajax json

Sto cercando di trovare un modo per utilizzare il completamento automatico di jQuery con l’origine callback che recupera i dati tramite un elenco di oggetti json ajax dal server.

Qualcuno potrebbe dare alcune indicazioni?

L’ho cercato su Google ma non sono riuscito a trovare una soluzione completa.

Perfettamente un buon esempio nei documenti di completamento automatico con codice sorgente.

jQuery

 

HTML

 
Powered by geonames.org
Result:

Se si restituisce un object JSON complesso, è necessario modificare la funzione di successo del completamento automatico come segue.

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

Il mio problema era che gli utenti finali avrebbero iniziato a digitare in una casella di testo e ricevere suggerimenti di autocompletamento (ACP) e aggiornare il controllo chiamante se è stato selezionato un suggerimento poiché l’ACP è stato progettato per impostazione predefinita. Tuttavia, dovevo anche aggiornare più altri controlli (caselle di testo, DropDown, ecc.) Con dati specifici per la selezione dell’utente finale. Ho cercato di capire una soluzione elegante al problema e sento che quello che ho sviluppato vale la pena condividere e spero che vi salverà almeno un po ‘di tempo.

WebMethod (SampleWM.aspx):

  • SCOPO:

    • Per acquisire i risultati della stored procedure di SQL Server e restituirli come stringa JSON al chiamante AJAX
  • GLI APPUNTI:

    • Data.GetDataTableFromSP () – È una funzione personalizzata che restituisce un DataTable dai risultati di una stored procedure
    • _
    • Funzione condivisa pubblica GetAutoCompleteData (stringa ByVal QueryFilterAs) As 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 Completamento automatico (AutoComplete.aspx):

  • SCOPO:
    • Eseguire la richiesta Ajax sul WebMethod e quindi gestire la risposta

  $(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("< ?= base_url('ecommerce/autocomplete') ?>",{'name':$( "#search_product" ).val()}).done(function(data, status){ response(JSON.parse(data)); }); } }); }); 

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