jQuery autocomplete with callback ajax json

Question

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

User · Accepted Answer

Perfectly good example in the Autocomplete docs with source code.

jQuery

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

HTML

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

User · Answer

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     PURPOSE     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  lt  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    amp  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  gt  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       amp  c ColumnName  amp           amp  r c ColumnName   amp                       Else                    jStr Append        amp  c ColumnName  amp           amp  r c ColumnName   amp                        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     PURPOSE     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

User · Answer

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

User · Answer

I hope this helps  var token   document getElementById  token   value  var nombre   document getElementById  txtNombre   value          quot  txtNombre quot   keyup function            ajax           type   quot POST quot           url  host      quot Formulario BuscarNombreAutocompletar  quot           data  JSON stringify    quot nombre quot   nombre             headers                 Authorization    Bearer     token                    contentType   quot application json  charset utf-8 quot           dataType   quot json quot           success  function  data                var dataArray                   if  controlCarga data                        each data 1   function  i  item                        dataArray push item frmNombre                                           txtNombre   autocomplete                       clearButton  true                      source  dataArray                      selectFirst  true                      minLength  2                                                      error  function  xhr  textStatus  errorThrown                console log  Error      xhr responseText

User · Answer

I used the construction of   each  data  i   function  key  value  But you must pre-match the names of the selection fields with the names of the form elements  Then  in the loop after  quot success quot   autocomplete elements from the  quot data quot  array  Did this  autocomplete form with ajax success

User · Answer

document  on  keyup    search product  function             search product    autocomplete         source function request response                       post   lt    base url  ecommerce autocomplete     gt     name       search product    val     done function data  status                        response JSON parse data                                      PHP code    public function autocomplete         name   POST  name         result  this- gt db- gt select  product name sku code  - gt like  product name   name - gt get  product list  - gt result array         names array        foreach  result as  row            names    row  product name              echo json encode  names

[jquery] jQuery autocomplete with callback ajax json

Examples related to jquery

Examples related to json

Examples related to autocomplete