jqueryui自动完成与json无关

问题描述

BLUF：我将jqueryui自动完成功能连接到AJAX-y JSON-y DB查找中。它称页面正确，并且页面返回JSON。但是，它实际上并不会将这些结果加载到UI中。似乎什么也没做。

相关JS：

$(function () {
            $("#searchtext").autocomplete({
                source: function (request,response) {
                    $.getJSON("<%=ResolveUrl("~/getPeople?prefix=") %>" + request.term,function (data) {
                        response($.map(data.dealers,function (value,key) {
                            return {
                                label: value,value: key
                            };
                        }));
                    });
                },select: function (e,i) {
                    $("#personID").val(i.item.val);
                },minLength: 2,delay: 100
            });
        });

getPeople.aspx的代码：

    Response.Headers.Add("Content-type","text/json")
    Response.Headers.Add("Content-type","application/json")
    Dim prefix
    prefix = Request.QueryString("prefix")
    
    Dim PDU_CS = System.Configuration.ConfigurationManager.ConnectionStrings("PDU").ConnectionString
    Using PDU_Connection As New System.Data.sqlClient.sqlConnection()
        PDU_Connection.ConnectionString = ConfigurationManager.ConnectionStrings("PDU").ConnectionString
        Using PDU_Command As New System.Data.sqlClient.sqlCommand()
            PDU_Command.CommandText = "select id,[name] FROM vw_Staff WHERE [name] LIKE @searchtext + '%'"
            PDU_Command.Parameters.AddWithValue("@searchtext",prefix)
            PDU_Command.Connection = PDU_Connection
            PDU_Connection.open()
            Using sdr As System.Data.sqlClient.sqlDataReader = PDU_Command.ExecuteReader()
                Dim dt As New DataTable
                dt.Load(sdr)
                Dim sData As String = JsonConvert.SerializeObject(dt)
                Response.Write(sData)
            End Using
            PDU_Connection.Close()
        End Using
    End Using

getPeople.aspx？prefix = Gibson的实际输出

[{"id":5854,"name":"GIBSON,NICHOLAS"}]

解决方法

建议两个更改：

$(function() {
  $("#searchtext").autocomplete({
      source: function(request,response) {
        $.getJSON("<%=ResolveUrl("~/getPeople?prefix=") %>" + request.term,function (data) {
          response($.map(data.dealers,function(value,key) {
            return {
              label: value.name,value: value.id
            };
          }));
        });
    },select: function(e,i) {
      $("#personID").val(i.item.value);
      return false;
    },minLength: 2,delay: 100
  });
});

1. 由于您要向$.map()传递对象数组，因此需要与每个对象（在本例中为数组value）进行交互。
2. select有ui，在您的情况下只有i，是i.item.value，而不是i.item.val。

参考：https://jqueryui.com/autocomplete/#custom-data