带有json的jqueryui自动完成什么都不做

Question

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"}]

Answer 1

建议进行两项更改：

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