jQuery 带有回调ajax json的jQuery自动完成

jQuery autocomplete with callback ajax json

提问by RollRoll

I'm trying to find a way to use jQuery autocomplete with callback source getting data via an ajax json object list from the server.

我试图找到一种方法来使用 jQuery 自动完成和回调源通过来自服务器的 ajax json 对象列表获取数据。

Could anybody give some directions?

有人可以指点迷津吗？

I googled it but couldn't find a complete solution.

我用谷歌搜索，但找不到完整的解决方案。

回答by charlietfl

Perfectly good example in the Autocomplete docswith source code.

带有源代码的自动完成文档中的完美示例。

jQuery

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

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>

回答by shana

If you are returning a complex json object you need to modify you success function of your auto-complete as follows.

如果您要返回一个复杂的 json 对象，则需要按如下方式修改自动完成的成功功能。

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

回答by BigD

My issue was that end users would start typing in a textbox and receive autocomplete (ACP) suggestions and update the calling control if a suggestion was selected as the ACP is designed by default. However, I also needed to update multiple other controls (textboxes, DropDowns, etc...) with data specific to the end user's selection. I have been trying to figure out an elegant solution to the issue and I feel the one I developed is worth sharing and hopefully will save you at least some time.

我的问题是最终用户将开始在文本框中输入并接收自动完成 (ACP) 建议并更新调用控件，如果选择了建议，因为 ACP 是默认设计的。但是，我还需要使用特定于最终用户选择的数据更新多个其他控件（文本框、下拉菜单等）。我一直试图找出一个优雅的解决方案来解决这个问题，我觉得我开发的一个值得分享，希望至少可以为你节省一些时间。

WebMethod (SampleWM.aspx):

WebMethod (SampleWM.aspx)：

• PURPOSE:

  • To capture SQL Server Stored Procedure results and return them as a JSON String to the AJAX Caller

• NOTES:

  • Data.GetDataTableFromSP() - Is a custom function that returns a DataTable from the results of a Stored Procedure
  • < System.Web.Services.WebMethod(EnableSession:=True) > _
  • Public Shared Function GetAutoCompleteData(ByVal QueryFilterAs String) As String

• 目的：

  • 捕获 SQL Server 存储过程结果并将它们作为 JSON 字符串返回给 AJAX 调用程序

• 笔记：

  • Data.GetDataTableFromSP() - 是一个自定义函数，它从存储过程的结果返回一个 DataTable
  • < System.Web.Services.WebMethod(EnableSession:=True) > _
  • 公共共享函数 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):

自动完成 jQuery (AutoComplete.aspx)：

• PURPOSE:
  • Perform the Ajax Request to the WebMethod and then handle the response

• 目的：
  • 对 WebMethod 执行 Ajax 请求，然后处理响应

---

---

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

---

---

回答by Web Developer Php

$(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 :

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