jQuery completamento automatico con callback ajax json

90

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

Qualcuno potrebbe dare delle indicazioni?

Ho cercato su Google ma non sono riuscito a trovare una soluzione completa.

jquery  json  autocomplete 
— RollRoll
fonte

Risposte:

125

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

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>
— charlietfl
fonte
11
questo è un esempio di interfaccia utente jquery.
— Rafael Herscovici
Invece di log () dovrebbe esserci console.log ()
— RN Kushwaha
4
@RNKushwaha Se noti, c'è una funzione in alto per la registrazione chiamata log.
— corsiKa
Non riesco a capire come success: function( data ) {response( data );} works inside the ajax call. I mean, what is that funzioni response () `? Crea alcuni <li>elementi in base ai dati, ma se voglio personalizzare quegli <li>elementi, cosa devo fare? Vorrei aggiungere un paio di attributi ...
— SagittarioA
2
Sto lavorando in Rails, e il mio controller restituisce format.json {render json: @ products.map (&: name) .to_json} e ho dovuto rimuovere il tipo di dati: "jsonp" nell'esempio sopra per farlo lavorare.
— franco
19

Se stai restituendo un oggetto json complesso, devi modificare la funzione di successo del tuo 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
            };
        }));
    }
});
— shana
fonte
Per me questo sta restituendo un risultato vuoto. Il risultato stesso (tabella vuota) è mostrato sotto la casella di input, ma non c'è nulla.
— FrenkyB
10

Il mio problema era che gli utenti finali iniziavano a digitare in una casella di testo e ricevevano suggerimenti per il completamento automatico (ACP) e aggiornavano il controllo della chiamata se un suggerimento veniva selezionato poiché l'ACP è progettato per impostazione predefinita. Tuttavia, avevo anche bisogno di aggiornare più altri controlli (caselle di testo, DropDown, ecc ...) con dati specifici per la selezione dell'utente finale. Ho cercato di trovare una soluzione elegante al problema e sento che vale la pena condividere quella che ho sviluppato e spero che ti farà risparmiare 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

  • APPUNTI:

    • Data.GetDataTableFromSP (): funzione personalizzata che restituisce un DataTable dai risultati di una stored procedure
    • <System.Web.Services.WebMethod (EnableSession: = True)> _
    • Funzione condivisa pubblica 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

JQuery di completamento automatico (AutoComplete.aspx):

  • SCOPO:
    • Eseguire la richiesta Ajax al 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);
             }                    
        });
     });
— BigD
fonte
2 
$(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);
}
— Sviluppatore Web Php
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.