Автозаполнение — это механизм, часто используемый на современных веб-сайтах для предоставления пользователю списка предложений для начала слова, который он / она набрал в текстовом поле. Затем пользователь может выбрать элемент из списка, который будет отображаться в поле ввода. Эта функция предотвращает необходимость ввода целого слова или набора слов.
JQueryUI предоставляет виджет автозаполнения — элемент управления, который во многом похож на выпадающий список <select>, но фильтрует варианты выбора, чтобы отображать только те из них, которые соответствуют тому, что пользователь вводит в элемент управления. jQueryUI предоставляет метод autocomplete () для создания списка предложений под полем ввода и добавляет новые CSS-классы к соответствующим элементам, чтобы придать им соответствующий стиль.
Метод autocomplete () может использоваться в двух формах:
Метод $ (селектор, контекст) .autocomplete (параметры)
Метод $ (селектор, контекст) .autocomplete («действие», params)
Метод autocomplete (options) объявляет, что HTML-элемент <input> должен управляться как поле ввода, которое будет отображаться над списком предложений. Параметр options — это объект, который определяет поведение списка предложений, когда пользователь вводит данные в поле ввода.
Вы можете предоставить один или несколько параметров одновременно, используя объект Javascript. Если нужно указать несколько параметров, разделите их запятой следующим образом:
В следующей таблице перечислены различные параметры, которые можно использовать с этим методом —
Эта опция используется для добавления элемента в меню. По умолчанию его значение равно нулю .
Вариант — appendTo
Эта опция используется для добавления элемента в меню. По умолчанию его значение равно нулю . Когда значение равно нулю, родители поля ввода будут проверены на наличие класса пользовательского интерфейса . Если найден элемент с классом ui-front , к этому элементу будет добавлено меню.
Синтаксис
Если для этого параметра установлено значение true , первый элемент меню будет автоматически фокусироваться при отображении меню. По умолчанию его значение равно false .
Опция — автофокус
Если для этого параметра установлено значение true , первый элемент меню будет автоматически фокусироваться при отображении меню. По умолчанию его значение равно false .
Синтаксис
Этот параметр представляет собой целое число, представляющее количество миллисекунд ожидания, прежде чем пытаться получить совпадающие значения (как указано в параметре источника ). Это может помочь уменьшить побои при получении нелокальных данных, предоставляя пользователю время для ввода большего количества символов перед началом поиска. По умолчанию его значение составляет 300 .
Опция — задержка
Этот параметр представляет собой целое число, представляющее количество миллисекунд ожидания, прежде чем пытаться получить совпадающие значения (как указано в параметре источника ). Это может помочь уменьшить побои при получении нелокальных данных, предоставляя пользователю время для ввода большего количества символов перед началом поиска. По умолчанию его значение составляет 300 .
Синтаксис
Эта опция, если указано и true , виджет автозаполнения изначально отключен. По умолчанию его значение равно false .
Опция — отключена
Эта опция, если указано и true , виджет автозаполнения изначально отключен. По умолчанию его значение равно false .
Синтаксис
Количество символов, которое необходимо ввести, прежде чем пытаться получить совпадающие значения (как указано в опции источника). Это может помешать представлению слишком большого набора значений, когда нескольких символов недостаточно, чтобы свести набор к разумному уровню. По умолчанию его значение равно 1 .
Вариант — minLength
Количество символов, которое необходимо ввести, прежде чем пытаться получить совпадающие значения (как указано в опции источника). Это может помешать представлению слишком большого набора значений, когда нескольких символов недостаточно, чтобы свести набор к разумному уровню. По умолчанию его значение равно 1 .
Синтаксис
Эта опция определяет положение меню предложений по отношению к связанному элементу ввода. Параметр опции по умолчанию используется для элемента ввода, но вы можете указать другой элемент для позиционирования. По умолчанию его значение равно {my: «left top», at: «left bottom», collision: «none»} .
Вариант — позиция
Эта опция определяет положение меню предложений по отношению к связанному элементу ввода. Параметр опции по умолчанию используется для элемента ввода, но вы можете указать другой элемент для позиционирования. По умолчанию его значение равно {my: «left top», at: «left bottom», collision: «none»} .
Синтаксис
Эта опция указывает способ получения данных, соответствующих входным данным. Необходимо указать значение, иначе виджет автозаполнения не будет создан. По умолчанию его значение равно none; должен быть указан .
Вариант — источник
Эта опция указывает способ получения данных, соответствующих входным данным. Необходимо указать значение, иначе виджет автозаполнения не будет создан. Это значение может быть:
Строка, представляющая URL-адрес ресурса сервера, который будет возвращать совпадающие данные,
массив локальных данных, из которых будет сопоставляться значение, или
функция, которая служит в качестве общего обратного вызова от предоставления совпадающих значений.
Синтаксис
Следующий раздел покажет вам несколько рабочих примеров функциональности виджетов автозаполнения.
В следующем примере демонстрируется простой пример функциональности виджета автозаполнения без передачи параметров в метод autocomplete () .
Давайте сохраним приведенный выше код в HTML-файле autocompleteexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы должны увидеть следующий вывод. Теперь вы можете играть с результатом —
В следующем примере демонстрируется использование опции autoFocus в виджете автозаполнения JqueryUI.
Давайте сохраним приведенный выше код в HTML-файле autocompleteexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —
В следующем примере демонстрируется использование двух параметров minLength и delay в виджете автозаполнения JqueryUI.
Давайте сохраним приведенный выше код в HTML-файле autocompleteexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —
В следующем примере демонстрируется использование метки параметра в виджете автозаполнения JqueryUI.
Давайте сохраним приведенный выше код в HTML-файле autocompleteexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —
В следующем примере демонстрируется использование внешнего файла для параметра источника в виджете автозаполнения JqueryUI.
Файл search.php находится в том же месте, что и вышеуказанный файл (autocompleteexample.html). Содержимое search.php, как показано ниже —
Давайте сохраним приведенный выше код в HTML-файле autocompleteexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод. Теперь вы можете играть с результатом —
Введите двухбуквенные слова, например: ja, sc и т. Д.
Метод autocomplete («action», params) может выполнять действие в списке предложений, например, показывать или скрывать. Действие указывается в виде строки в первом аргументе (например, «закрыть», чтобы скрыть список). Проверьте действия, которые можно передать, в следующей таблице.
В следующей таблице перечислены различные действия, которые можно использовать с этим методом —
Это действие скрывает список предложений в меню автозаполнения. Этот метод не принимает никаких аргументов.
Действие — закрыть
Это действие скрывает список предложений в меню автозаполнения. Этот метод не принимает никаких аргументов.
Синтаксис
Это действие удаляет функцию автозаполнения. Списки предложений удаляются. Этот метод не принимает никаких аргументов.
Действие — уничтожить
Это действие удаляет функцию автозаполнения. Списки предложений удаляются. Этот метод не принимает никаких аргументов.
Синтаксис
Это действие отключает механизм автозаполнения. Список предложений больше не появляется. Этот метод не принимает никаких аргументов.
Действие — отключить
Это действие отключает механизм автозаполнения. Список предложений больше не появляется. Этот метод не принимает никаких аргументов.
Синтаксис
Это действие активирует механизм автозаполнения. Список предложений снова будет отображаться. Этот метод не принимает никаких аргументов.
Действие — включить
Это действие активирует механизм автозаполнения. Список предложений снова будет отображаться. Этот метод не принимает никаких аргументов.
Синтаксис
Это действие возвращает значение указанного параметра optionName . Эта опция соответствует одной из тех, которые используются с автозаполнением (опции).
Действие — опция (optionName)
Это действие возвращает значение указанного параметра optionName . Эта опция соответствует одной из тех, которые используются с автозаполнением (опции).
Синтаксис
Это действие получает объект, содержащий пары ключ / значение, представляющие текущий хэш параметров автозаполнения.
Действие — опция
Это действие получает объект, содержащий пары ключ / значение, представляющие текущий хэш параметров автозаполнения.
Синтаксис
Это действие устанавливает значение параметра автозаполнения, связанного с указанным параметром optionName . Аргумент optionName — это имя опции, которую нужно установить, а значение — это значение, которое нужно установить для опции.
Действие — опция (optionName, value)
Это действие устанавливает значение параметра автозаполнения, связанного с указанным параметром optionName . Аргумент optionName — это имя опции, которую нужно установить, а значение — это значение, которое нужно установить для опции.
Синтаксис
Это действие устанавливает один или несколько параметров для автозаполнения. Аргумент options представляет собой карту пар опция-значение, которые должны быть установлены.
Действие — опция (варианты)
Это действие устанавливает один или несколько параметров для автозаполнения. Аргумент options представляет собой карту пар опция-значение, которые должны быть установлены.
Синтаксис
Это действие ищет соответствие между строковым значением и источником данных (указывается в options.source ). Минимальное количество символов (указано в options.minLength ) должно быть достигнуто в значении, иначе поиск не будет выполнен.
Действие — поиск ([значение])
Это действие ищет соответствие между строковым значением и источником данных (указывается в options.source ). Минимальное количество символов (указано в options.minLength ) должно быть достигнуто в значении, иначе поиск не будет выполнен.
Синтаксис
Получить элемент <ul> DOM, соответствующий списку предложений. Это объект класса jQuery, который обеспечивает легкий доступ к списку без использования селекторов jQuery.
Действие — виджет
Получить элемент <ul> DOM, соответствующий списку предложений. Это объект класса jQuery, который обеспечивает легкий доступ к списку без использования селекторов jQuery.
Синтаксис
Теперь давайте посмотрим на пример, используя действия из таблицы выше. В следующем примере демонстрируется использование метода option (optionName, value) .
Давайте сохраним приведенный выше код в HTML-файле autocompleteexample.htm и откроем его в стандартном браузере, который поддерживает javascript, вы также должны увидеть следующий вывод:
Виджет автозаполнения может быть расширен как созданный с помощью фабрики виджетов. При расширении виджетов у вас есть возможность переопределить или добавить поведение существующих методов. В следующей таблице перечислены методы, которые действуют как точки расширения с той же стабильностью API, что и методы плагинов, перечисленные выше .
Этот метод управляет созданием каждой опции в меню виджета. Этот метод создает новый элемент <li>, добавляет его в меню и возвращает его.
_renderItem (ul, item)
Этот метод управляет созданием каждой опции в меню виджета. Этот метод создает новый элемент <li>, добавляет его в меню и возвращает его. Где —
<ul> — это элемент, который должен быть добавлен к вновь созданному элементу <li>.
вещь
Этот метод управляет построением меню виджета.
_renderMenu (ul, items)
Этот метод управляет построением меню виджета. Где —
<ul> — это массив элементов, которые соответствуют введенному пользователем термину. Каждый элемент является объектом со свойствами метки и значения .
Этот метод контролирует изменение размера меню перед его отображением. Элемент меню доступен по адресу this.menu.element . Этот метод не принимает никаких аргументов.
_resizeMenu ()
Этот метод контролирует изменение размера меню перед его отображением. Элемент меню доступен по адресу this.menu.element . Этот метод не принимает никаких аргументов.
В дополнение к методу autocomplete (options), который мы видели в предыдущих разделах, JqueryUI предоставляет методы событий, которые запускаются для определенного события. Эти методы событий перечислены ниже —
Это событие вызывается, когда значение элемента <input> изменяется в зависимости от выбора. При срабатывании это событие всегда наступает после запуска события закрытия .
Событие — изменить (событие, пользовательский интерфейс)
Это событие вызывается, когда значение элемента <input> изменяется в зависимости от выбора. При срабатывании это событие всегда наступает после запуска события закрытия . Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —
item — пункт, выбранный из меню, если есть. В противном случае свойство имеет значение null.
Синтаксис
Это событие вызывается всякий раз, когда закрывается меню автозаполнения.
Событие — закрыть (событие, интерфейс)
Это событие вызывается всякий раз, когда закрывается меню автозаполнения. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .
Синтаксис
Это событие срабатывает при создании автозаполнения.
Событие — создать (событие, пользовательский интерфейс)
Это событие вызывается при создании автозаполнения. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —
item — пункт, выбранный из меню, если есть. В противном случае свойство имеет значение null.
Синтаксис
Это событие вызывается всякий раз, когда один из пунктов меню получает фокус. Если не отменено (например, возвращением false), сфокусированное значение устанавливается в элементе <input>.
Событие — фокус (событие, интерфейс)
Это событие вызывается всякий раз, когда один из пунктов меню получает фокус. Если не отменено (например, возвращением false), сфокусированное значение устанавливается в элементе <input>. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —
предмет — сфокусированный предмет.
Синтаксис
Это событие вызывается после того, как данные были готовы, и меню собирается открыться.
Событие — открыть (событие, интерфейс)
Это событие вызывается после того, как данные были готовы, и меню собирается открыться. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .
Синтаксис
Это событие вызывается после завершения поиска, перед тем, как отобразится меню. Это событие всегда инициируется, когда поиск завершается, даже если меню не будет отображаться, потому что нет результатов или автозаполнение отключено.
Событие — ответ (событие, пользовательский интерфейс)
Это событие вызывается после завершения поиска, перед тем, как отобразится меню. Это событие всегда инициируется, когда поиск завершается, даже если меню не будет отображаться, потому что нет результатов или автозаполнение отключено. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —
content — содержит данные ответа и может быть изменен для изменения результатов, которые будут показаны.
Синтаксис
Это событие запускается после того, как выполнены любые критерии задержки и minLength , непосредственно перед активацией механизма, указанного источником. В случае отмены операция поиска прекращается.
Событие — поиск (событие, интерфейс)
Это событие запускается после того, как выполнены любые критерии задержки и minLength , непосредственно перед активацией механизма, указанного источником. В случае отмены операция поиска прекращается. Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта .
Синтаксис
Это событие вызывается, когда значение выбирается из меню автозаполнения. Отмена этого события не позволяет установить значение в элементе <input> (но не мешает закрытию меню).
Событие — выберите (событие, интерфейс)
Это событие вызывается, когда значение выбирается из меню автозаполнения. Отмена этого события не позволяет установить значение в элементе <input> (но не мешает закрытию меню). Где событие имеет тип события , а пользовательский интерфейс имеет тип объекта . Возможные значения пользовательского интерфейса —
item — Объект со свойствами метки и значения для выбранной опции.
Синтаксис
В следующем примере демонстрируется использование метода события в виджетах автозаполнения. Этот пример демонстрирует использование событий focus и select .
Давайте сохраним приведенный выше код в HTML-файле autocompleteexample.htm и откроем его в стандартном браузере, который поддерживает javascript. Вы также должны увидеть следующий вывод —