Автозаполнение при добавлении в поле ввода позволяет пользователям быстро находить и выбирать из предварительнозаполняет список значений по мере их ввода, используя поиск и фильтрацию.
Задав фокус поля автозаполнения или введя в него что-либо, плагин начинает поиск записей, которые соответствуют, и отображает список значений на выбор.Вводя больше символов, пользователь может отфильтровать список для лучшего соответствия.
Это можно использовать для ввода предыдущих выбранных значений, например, вы можете использовать автозаполнение для ввода тегов, для ввода адреса вы можете ввестиназвание города и получите почтовый индекс, или, возможно, введите адреса электронной почты из адресной книги.
Вы можете извлекать данные из локального и / или удаленного источника: локальный подходит для небольших наборов данных (например,адресная книга с 50 записями), дистанционное необходимо для больших наборов данных, таких как база данных с сотнями или миллионами записей для выбора.
Автозаполнение можно настроить для работы с различными источниками данных, просто указав источниквариант.Источником данных может быть:
- Массив с локальными данными
- Строка с указанием URL
- Обратный вызов
Ожидаетсяформат данных
Данные из локальных данных, URL или обратного вызова могут иметь два варианта:
- Массив строк: ["Choice1", "Choice2"] *
- Массив объектов со свойствами метки и значения: [{label: "Choice1", значение: "value1"}, ...]
Свойство метки отображается в предложениименю.Значение будет вставлено в элемент ввода после того, как пользователь выберет что-то из меню.Если указано только одно свойство, оно будет использоваться для обоих, например.если вы предоставляете только значения-свойства, значение также будет использоваться в качестве метки.
Когда используется строка, плагин автозаполнения ожидает, что эта строка будет указывать на ресурс URL, который будет возвращать данные JSON.Это может быть на том же хосте или на другом (должен предоставить JSONP).Плагин автозаполнения не фильтрует результаты, вместо этого в URL добавляется параметр запроса «term», который серверный сценарий должен использовать для фильтрации результатов.Сами данные могут быть в том же формате, что и локальные данные, описанные выше.
Третий вариант, обратный вызов, обеспечивает наибольшую гибкость и может использоваться для подключения любого источника данных к автозаполнению.Обратный вызов получает два аргумента:
- Объект запроса с единственным свойством под названием «term», который ссылается на значение, которое в настоящее время находится в текстовом вводе.Например, когда пользователь ввел «новый йо» в поле города, термин «автозаполнение» будет равен «новый йо».
- ответный обратный вызов, который ожидает, что в одном аргументе будут содержаться данные, предлагаемые пользователю,Эти данные должны быть отфильтрованы на основе предоставленного термина и могут быть в любом из форматов, описанных выше для простых локальных данных (String-Array или Object-Array с меткой / значением / обоими свойствами).Это важно при предоставлении пользовательского обратного вызова источника для обработки ошибок во время запроса.Вы всегда должны вызывать ответный обратный вызов, даже если вы столкнулись с ошибкой.Это гарантирует, что виджет всегда будет иметь правильное состояние.
Метка всегда обрабатывается как текст, если вы хотите, чтобы метка рассматривалась как html, вы можете использовать расширение html Скотта Гонсалеса.Все демонстрации посвящены различным вариантам опции источника - найдите ту, которая соответствует вашему варианту использования, и посмотрите на код.