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

Question

我有条件 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,
            });
        }
    });
}

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

您可以为源使用函数：

Function: The third variation, a callback, provides the most flexibility and can be used to connect any data source to Autocomplete, including JSONP. The callback gets two arguments:

A request object, with a single term property, which refers to the value currently in the text input. For example, if the user enters "new yo" in a city field, the Autocomplete term will equal "new yo".

A response callback, which expects a single argument: the data to suggest to the user. This data should be filtered based on the provided term, and can be in any of the formats described above for simple local data. It's important when providing a custom source callback to handle errors during the request. You must always call the response callback even if you encounter an error. This ensures that the widget always has the correct state.

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

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

AutoComplete inside keyup jquery weird behaviour

javascript

asp.net-mvc

jquery

jquery-ui

jquery-ui-autocomplete