Автозаполнение внутри 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,
});

Вы можете использовать функцию для источника:

Функция: Третий вариант, обратный вызов, обеспечивает максимальную гибкость и может использоваться для подключения любого источника данных к автозаполнению, включая JSONP. Обратный вызов получает два аргумента:

• Объект request с одним свойством term, которое относится к значению, которое в данный момент находится во вводе текста. Например, если пользователь вводит "new yo" в поле города, автозаполнение term будет равно "new yo".

• обратный вызов response, который ожидает один аргумент: данные, которые нужно предложить пользователю. Эти данные должны быть отфильтрованы на основе предоставленного термина и могут быть в любом из форматов, описанных выше для простых локальных данных. Это важно при предоставлении настраиваемого обратного вызова источника для обработки ошибок во время запроса. Вы всегда должны вызывать обратный вызов ответа, даже если вы столкнулись с ошибкой. Это гарантирует, что виджет всегда будет иметь правильное состояние.

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