自动完成在keyup jquery中的奇怪行为答案

【问题标题】：AutoComplete inside keyup jquery weird behaviour自动完成在keyup jquery中的奇怪行为
【发布时间】：2020-06-18 07:10:22
【问题描述】：

我有一个条件 ajax 函数调用。收到响应后，数据将绑定到自动完成。问题是，在输入第一个键时，自动完成列表不会显示，即使它绑定了值。该列表仅在输入后续字母后才会显示。

$("#AutoComplete").on('keyup', function (event)
{
    if ($("#AutoComplete").val().length <= 5 )
    {
        GetData();
    }
});

function GetData()
{
    $.ajax({
        type: "POST",
        url: "../Controller/function",
        contentType: "application/json; charset=utf-8",
        data: '{"key":"' + $("#AutoComplete").val() + '"}',

        dataType: "json",
        success: function (data)
        {           
            var output= $.map(data, function (item)
            {
                return {
                    label: item.Name,
                    value: item.ID
                };
            });

            $("#AutoComplete").autocomplete({
                source: output,
                autoFocus: true,
            });
        }
    });
}

【问题讨论】：

标签： javascript jquery asp.net-mvc jquery-ui jquery-ui-autocomplete

【解决方案1】：

考虑以下示例。

$("#AutoComplete").autocomplete({
  source: function(req, resp) {
    if (req.term.length <= 5) {
      $.ajax({
        type: "POST",
        url: "../Controller/function",
        contentType: "application/json; charset=utf-8",
        data: {
          key: req.term
        },
        dataType: "json",
        success: function(data) {
          var output = $.map(data, function(item) {
            return {
              label: item.Name,
              value: item.ID
            };
          });
          resp(output);
        }
      });
    }
  },
  autoFocus: true,
});

您可以使用函数作为源：

功能：第三种变体，回调，提供了最大的灵活性，可用于将任何数据源连接到自动完成，包括 JSONP。回调有两个参数：

request 对象，具有单个 term 属性，它引用当前文本输入中的值。例如，如果用户在城市字段中输入"new yo"，则自动完成term 将等于"new yo"。

response 回调，它需要一个参数：建议给用户的数据。此数据应根据提供的术语进行过滤，并且可以采用上述任何简单本地数据的格式。在请求期间提供自定义源回调以处理错误时，这一点很重要。即使遇到错误，您也必须始终调用响应回调。这可确保小部件始终具有正确的状态。

https://api.jqueryui.com/autocomplete/#option-source

【讨论】：