jQuery autocomplete dengan callback ajax json


90

Saya mencoba menemukan cara untuk menggunakan jQuery autocomplete dengan sumber callback mendapatkan data melalui daftar objek ajax json dari server.

Adakah yang bisa memberikan arahan?

Saya mencarinya di Google tetapi tidak dapat menemukan solusi lengkap.

Jawaban:


130

Contoh yang sangat bagus di dokumen Autocomplete dengan kode sumber.

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>

11
ini adalah contoh jquery ui.
Rafael Herscovici

Alih-alih log () harus ada console.log ()
RN Kushwaha

4
@RNKushwaha Jika Anda perhatikan, ada fungsi di atas untuk logging yang dipanggil log.
corsiKa

Saya tidak mengerti bagaimana success: function( data ) {response( data );} works inside the ajax call. I mean, what is that fungsi response () `? Ini membuat beberapa <li>elemen sesuai dengan data tetapi jika saya ingin menyesuaikan <li>elemen itu, apa yang harus saya lakukan? Saya ingin menambahkan sepasang atribut ...
SagitariusA

2
Saya bekerja di Rails, dan pengontrol saya mengembalikan, format.json {render json: @ products.map (&: name) .to_json}, dan saya harus menghapus tipe data: "jsonp" pada contoh di atas agar dapat melakukannya bekerja.
terang

20

Jika Anda mengembalikan objek json yang kompleks, Anda perlu mengubah fungsi sukses pelengkapan otomatis Anda sebagai berikut.

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

Bagi saya ini mengembalikan hasil kosong. Hasilnya sendiri (tabel kosong) ditampilkan di bawah kotak input, tetapi tidak ada yang masuk.
FrenkyB

10

Masalah saya adalah bahwa pengguna akhir akan mulai mengetik di kotak teks dan menerima saran pelengkapan otomatis (ACP) dan memperbarui kontrol panggilan jika saran dipilih karena ACP dirancang secara default. Namun, saya juga perlu memperbarui beberapa kontrol lainnya (kotak teks, DropDowns, dll ...) dengan data khusus untuk pilihan pengguna akhir. Saya telah mencoba mencari solusi elegan untuk masalah ini dan saya merasa solusi yang saya kembangkan layak untuk dibagikan dan semoga akan menghemat waktu Anda.

WebMethod (SampleWM.aspx):

  • TUJUAN:

    • Untuk merekam hasil Prosedur Tersimpan SQL Server dan mengembalikannya sebagai String JSON ke AJAX Caller
  • CATATAN:

    • Data.GetDataTableFromSP () - Adalah fungsi kustom yang mengembalikan DataTable dari hasil Stored Prosedur
    • <System.Web.Services.WebMethod (EnableSession: = True)> _
    • Fungsi Umum Bersama GetAutoCompleteData (String ByVal QueryFilterAs) Sebagai 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 AutoComplete (AutoComplete.aspx):

  • TUJUAN:
    • Lakukan Permintaan Ajax ke WebMethod dan kemudian tangani responsnya

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


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

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

0

Saya menggunakan konstruksi $.each (data [i], function (key, value) Tapi Anda harus mencocokkan nama-nama bidang pemilihan dengan nama-nama elemen formulir. Kemudian, dalam loop setelah "berhasil", pelengkapan otomatis elemen dari larik "data". Lakukan ini: formulir pelengkapan otomatis dengan sukses ajax


0

Saya harap ini membantu:

var token = document.getElementById('token').value;
var nombre = document.getElementById('txtNombre').value;    

$("#txtNombre").keyup(function () {
    $.ajax({
        type: "POST",
        url: host() + "Formulario/BuscarNombreAutocompletar/",
        data: JSON.stringify({ "nombre": nombre }),
        headers: {
            'Authorization': 'Bearer ' + token
        },
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        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);
        }
    });
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.