jQuery Autocomplete mit Rückruf ajax json

89

Ich versuche, eine Möglichkeit zu finden, die automatische Vervollständigung von jQuery mit der Rückrufquelle zu verwenden, um Daten über eine Ajax-JSON-Objektliste vom Server abzurufen.

Könnte jemand eine Anweisung geben?

Ich habe gegoogelt, konnte aber keine vollständige Lösung finden.

RollRoll
quelle

Antworten:

124

Perfektes Beispiel in den Autocomplete-Dokumenten mit Quellcode.

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
quelle
11
Dies ist ein Beispiel für eine Abfrage.
Dementic
Anstelle von log () sollte es console.log () geben
RN Kushwaha
4
@RNKushwaha Wenn Sie bemerken, gibt es oben eine Funktion zum Protokollieren log.
CorsiKa
Ich kann nicht verstehen, wie success: function( data ) {response( data );} works inside the ajax call. I mean, what is that response () `funktioniert. Es werden einige <li>Elemente gemäß den Daten erstellt. Wenn ich diese <li>Elemente jedoch anpassen möchte , was soll ich tun? Ich möchte ein Paar Attribute hinzufügen ...
SchützeA
2
Ich arbeite in Rails und mein Controller gibt format.json {render json: @ products.map (&: name) .to_json} zurück, und ich musste den Datentyp "jsonp" im obigen Beispiel entfernen, um dies zu tun arbeiten.
Frank
18

Wenn Sie ein komplexes JSON-Objekt zurückgeben, müssen Sie die Erfolgsfunktion Ihrer automatischen Vervollständigung wie folgt ändern.

$.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
quelle
Für mich ist dies ein leeres Ergebnis. Das Ergebnis selbst (leere Tabelle) wird unter dem Eingabefeld angezeigt, aber nichts ist in.
FrenkyB
10

Mein Problem war, dass Endbenutzer anfingen, ein Textfeld einzugeben, Vorschläge für die automatische Vervollständigung (ACP) zu erhalten und die Anrufsteuerung zu aktualisieren, wenn ein Vorschlag ausgewählt wurde, da der ACP standardmäßig entworfen wurde. Ich musste jedoch auch mehrere andere Steuerelemente (Textfelder, DropDowns usw.) mit Daten aktualisieren, die für die Auswahl des Endbenutzers spezifisch sind. Ich habe versucht, eine elegante Lösung für das Problem zu finden, und ich bin der Meinung, dass die von mir entwickelte Lösung es wert ist, geteilt zu werden, und ich hoffe, dass Sie zumindest einige Zeit sparen.

WebMethod (SampleWM.aspx):

  • ZWECK:

    • So erfassen Sie die Ergebnisse der gespeicherten SQL Server-Prozedur und geben sie als JSON-Zeichenfolge an den AJAX-Aufrufer zurück
  • ANMERKUNGEN:

    • Data.GetDataTableFromSP () - Ist eine benutzerdefinierte Funktion, die eine DataTable aus den Ergebnissen einer gespeicherten Prozedur zurückgibt
    • <System.Web.Services.WebMethod (EnableSession: = True)> _
    • Öffentliche gemeinsame Funktion 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):

  • ZWECK:
    • Führen Sie die Ajax-Anforderung an die WebMethod aus und verarbeiten Sie dann die Antwort

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

Großes D
quelle
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));
        });
      }
    });
});

PHP-Code:

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);
}
Webentwickler Php
quelle
0

Ich habe die Konstruktion von verwendet. $.each (data [i], function (key, value) Sie müssen jedoch die Namen der Auswahlfelder mit den Namen der Formularelemente vorab abgleichen. Vervollständigen Sie dann in der Schleife nach "Erfolg" automatisch Elemente aus dem Array "Daten". Haben Sie dies getan: Autocomplete-Formular mit Ajax-Erfolg

Alexander
quelle