jQuery geri arama ajax json ile otomatik tamamlama

92

Sunucudan bir ajax json nesne listesi aracılığıyla geri arama kaynağıyla veri alma ile jQuery otomatik tamamlamayı kullanmanın bir yolunu bulmaya çalışıyorum.

Biri yol tarifi verebilir mi?

Googledim ama tam bir çözüm bulamadım.

jquery  json  autocomplete 
— RollRoll
kaynak

Yanıtlar:

131

Kaynak kodlu Otomatik Tamamlama belgelerinde mükemmel derecede iyi bir örnek .

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
kaynak
11
bu bir jquery kullanıcı arayüzü örneğidir.
— Rafael Herscovici
Log () yerine console.log ()
— RN Kushwaha
4
@RNKushwaha Fark ederseniz, en üstte günlük kaydı için çağrılan bir işlev var log.
— corsiKa
success: function( data ) {response( data );} works inside the ajax call. I mean, what is that Response () `işlevinin nasıl çalıştığını anlayamıyorum ? <li>Verilere göre bazı unsurlar yaratır ama bu <li>unsurları özelleştirmek istersem ne yapmalıyım? Bir çift özellik eklemek istiyorum ...
— Yay A
2
Rails'de çalışıyorum ve denetleyicim format.json {render json: @ products.map (&: name) .to_json} döndürüyor ve bunun için yukarıdaki örnekte "jsonp" veri türünü kaldırmam gerekiyor çalışmak.
— frank
21

Karmaşık bir json nesnesi döndürüyorsanız, otomatik tamamlamanızın başarı işlevini aşağıdaki gibi değiştirmeniz gerekir. 

$.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
kaynak
Benim için bu boş sonuç döndürüyor. Sonucun kendisi (boş tablo) giriş kutusunun altında gösteriliyor, ancak içinde hiçbir şey yok.
— FrenkyB
11

Benim sorunum, son kullanıcıların bir metin kutusuna yazmaya başlayıp otomatik tamamlama (ACP) önerileri alması ve ACP varsayılan olarak tasarlandığı için bir öneri seçilmişse arama denetimini güncellemesiydi. Bununla birlikte, son kullanıcının seçimine özgü verilerle birden çok başka denetimi de (metin kutuları, DropDowns, vb.) Güncellemem gerekiyordu. Soruna zarif bir çözüm bulmaya çalışıyorum ve geliştirdiğim çözümün paylaşmaya değer olduğunu düşünüyorum ve umarım size en azından biraz zaman kazandırır.

WebMethod (SampleWM.aspx):

  • AMAÇ:

    • SQL Server Depolanan Prosedür sonuçlarını yakalamak ve bunları AJAX Arayan'a JSON Dizesi olarak döndürmek

  • NOTLAR:

    • Data.GetDataTableFromSP () - Depolanan bir Prosedürün sonuçlarından bir DataTable döndüren özel bir işlevdir
    • <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

Otomatik Tamamlama jQuery (Otomatik Tamamlama.aspx):

  • AMAÇ:
    • WebMethod'a Ajax İsteğini gerçekleştirin ve ardından yanıtı işleyin
    $(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);
             }                    
        });
     });
— Büyük D
kaynak
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 kodu:

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);
}
— Web Geliştirici Php
kaynak
0

Yapısını kullandım $.each (data [i], function (key, value) Ama seçim alanlarının adlarını form öğelerinin adlarıyla önceden eşleştirmelisiniz. Ardından, "başarılı" dan sonraki döngüde, "veri" dizisindeki öğeleri otomatik tamamlayın. Bunu yaptım: form ajax başarısıyla otomatik tamamlama

— İskender
kaynak
0

Umarım bu yardımcı olur:

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);
        }
    });
});
— Alex Ramirez
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.