У меня есть условный вызов функции 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,
            });
        }
    });
}
0
AdrienBruce 18 Июн 2020 в 10:10

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

1
Community 20 Июн 2020 в 09:12