jQuery autocomplete with callback ajax json

  • Added:
  • |
  • In: Wordpress

I'm trying to find a way to use jQuery autocomplete with callback source getting data via an ajax json object list from the server.

Could anybody give some directions?

I googled it but couldn't find a complete solution.

This Question Has 3 Answeres | Orginal Question | The Poet

Perfectly good example in the Autocomplete docs with source code.


<script> $(function() { function log( message ) { $( "<div>" ).text( message ).prependTo( "#log" ); $( "#log" ).scrollTop( 0 ); } $( "#city" ).autocomplete({ source: function( request, response ) { $.ajax({ url: "http://gd.geobytes.com/AutoCompleteCity", dataType: "jsonp", data: { q: request.term }, success: function( data ) { response( data ); } }); }, minLength: 3, select: function( event, ui ) { log( ui.item ? "Selected: " + ui.item.label : "Nothing selected, input was " + this.value); }, open: function() { $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" ); }, close: function() { $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" ); } }); }); </script> 


<div class="ui-widget"> <label for="city">Your city: </label> <input id="city"> Powered by <a href="http://geonames.org">geonames.org</a> </div> <div class="ui-widget" style="margin-top:2em; font-family:Arial"> Result: <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div> </div> 

My issue was that end users would start typing in a textbox and receive autocomplete (ACP) suggestions and update the calling control if a suggestion was selected as the ACP is designed by default. However, I also needed to update multiple other controls (textboxes, DropDowns, etc...) with data specific to the end user's selection. I have been trying to figure out an elegant solution to the issue and I feel the one I developed is worth sharing and hopefully will save you at least some time.

WebMethod (SampleWM.aspx):


    • To capture SQL Server Stored Procedure results and return them as a JSON String to the AJAX Caller
  • NOTES:

    • Data.GetDataTableFromSP() - Is a custom function that returns a DataTable from the results of a Stored Procedure
    • < System.Web.Services.WebMethod(EnableSession:=True) > _
    • Public Shared Function GetAutoCompleteData(ByVal QueryFilterAs String) 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 

AutoComplete jQuery (AutoComplete.aspx):

    • Perform the Ajax Request to the WebMethod and then handle the response

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

If you are returning a complex json object you need to modify you success function of your auto-complete as follows.

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

I am...

Sajjad Hossain

I have five years of experience in web development sector. I love to do amazing projects and share my knowledge with all.

Connect Social With PHPAns