jQuery autocomplete với callback ajax json

Tôi đang cố gắng tìm cách sử dụng tính năng tự động hoàn thành jQuery với nguồn gọi lại nhận dữ liệu thông qua danh sách đối tượng ajax json từ máy chủ.

Ai có thể cho một số hướng dẫn?

Tôi đã truy cập nó nhưng không thể tìm thấy giải pháp hoàn chỉnh.

Ví dụ hoàn toàn tốt trong tài liệu Tự động điền với mã nguồn.

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>

Nếu bạn đang trả về một đối tượng json phức tạp, bạn cần sửa đổi chức năng tự động hoàn thành thành công của bạn như sau.

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

Vấn đề của tôi là người dùng cuối sẽ bắt đầu nhập vào hộp văn bản và nhận các đề xuất tự động hoàn thành (ACP) và cập nhật điều khiển cuộc gọi nếu một đề xuất được chọn làm ACP được thiết kế theo mặc định. Tuy nhiên, tôi cũng cần cập nhật nhiều điều khiển khác (hộp văn bản, DropDown, v.v.) với dữ liệu cụ thể cho lựa chọn của người dùng cuối. Tôi đã cố gắng tìm ra một giải pháp hữu ích cho vấn đề và tôi cảm thấy giải pháp mà tôi đã phát triển đáng để chia sẻ và hy vọng sẽ giúp bạn tiết kiệm ít nhất một thời gian.

WebMethod (SampleWM.aspx):

• MỤC ĐÍCH:

  • Để nắm bắt các kết quả Thủ tục được Lưu trữ của Máy chủ SQL và trả về chúng dưới dạng Chuỗi JSON cho Người gọi AJAX

• LƯU Ý:

  • Data.GetDataTableFromSP () - Là một hàm tùy chỉnh trả về một DataTable từ kết quả của một Thủ tục được lưu trữ
  • <System.Web.Services.WebMethod (EnableSession: = True)> _
  • Hàm chia sẻ công khai 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

Tự động điền jQuery (AutoComplete.aspx):

• MỤC ĐÍCH:
  • Thực hiện Yêu cầu Ajax tới WebMethod và sau đó xử lý phản hồi

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

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

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

Tôi đã sử dụng cấu trúc của $.each (data [i], function (key, value) Nhưng bạn phải ghép trước tên của các trường lựa chọn với tên của các phần tử biểu mẫu. Sau đó, trong vòng lặp sau "thành công", tự động hoàn thành các phần tử từ mảng "dữ liệu". Đã thực hiện điều này: tự động hoàn thành biểu mẫu với ajax thành công