Если Вы пробовали что-то найти в, то наверняка знаете, что после ввода символа в текстовое поле появляется выпадающий список, который содержит десяток строк со словами, начальные символы которых совпадают с теми символами, что Вы уже успели ввести. Так работает Google Suggest. Почему бы не сделать так же на своем сайте? Ведь это удобно. К тому же с библиотекой jQuery это не так уж и сложно…
Как обычно, для начала я приведу пример, а потом мы будем разбирать, как он работает.
Поскольку это всего лишь пример, поясню, что в левом текстовом поле доступен выбор российских городов, которые начинаются на букву «М», а в правом – список поселков городского типа (пгт) с численностью населения более 10 тыс. жителей (по данным Всероссийской переписи населения на 9 октября 2002 года).
Кроме того, используются разные настройки. В общем, попробуйте пример, а потом продолжим….
Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.
Сначала потребуется только подключить библиотеку и файл query.autocomplete.js в разделе HEAD нужной страницы.
Если скачаете пример, то легко сможете разобраться и в стилевом оформлении. Учтите, что файл jquery.autocomplete.js использует имена классов (начинаются с ac_), но если Вы захотите по каким-то причинам изменить эти имена – это тоже можно будет довольно легко сделать.
Что касается HTML-кода, то естественно нужно описать поле для ввода текста:
А вот использовать jquery.autocomplete.js можно двумя разными способами.
Способ первый:
Если объем данных не очень большой, и данные не будут изменяться, то их можно поместить непосредственно на странице, как и сделано в примере в текстовом поле слева.
$(document).ready(function(){ $("#example").autocompleteArray([ "Магадан", "Магас", "Магнитогорск", "Майкоп", ........ "Муром", "Мценск", "Мыски", "Мытищи", "Мышкин" ], { delay:10, minChars:1, matchSubset:1, autoFill:true, maxItemsToShow:10 }); });
Способ второй:
Если данные большого объема, и/или часто изменяются, то необходимо предусмотреть обработку этих данных на сервере (для примера выбран PHP). jquery.autocomplete.js
предусматривает отправку GET-запроса с параметром q
, значением которого являются введенные символы. Именно так в примере работает текстовое поле справа.
$(document).ready(function(){ $("#example2").autocomplete("autocomplete.php", { delay:10, minChars:2, matchSubset:1, autoFill:true, matchContains:1, cacheLength:10, selectFirst:true, formatItem:liFormat, maxItemsToShow:10, onItemSelect:selectItem }); });
В этих примерах, помимо данных (в первом случае) и URL обработчика (во втором случае) мы передаем некоторые опции. Список опций приведен ниже:
autoFill – когда Вы начинаете вводить текст, в поле ввода будет подставлено (и выделено) первое подходящее значение из списка. Если Вы продолжаете вводить текст, в поле ввода и далее будет подставляться подходящее значение, но уже с учетом введенного Вами текста. (По умолчанию: false).
inputClass – этот класс будет добавлен к элементу ввода. (По умолчанию: «ac_input»).
resultsClass – класс для UL, который будет содержать элементы результата (элементы LI). (По умолчанию: «ac_results»).
– класс для элемента ввода, в то время, когда происходит обработка данных на сервере. (По умолчанию: «ac_loading»).lineSeparator – символ, который разделяет строки в данных, возвращаемых сервером. (По умолчанию: «\n»).
cellSeparator – символ, который разделяет «ячейки» в строках данных, возвращаемых сервером. (По умолчанию: «|»).
minChars – минимальное число символов, которое пользователь должен напечатать перед тем, как будет активизирван запрос. (По умолчанию: 1).
delay – задержка в миллисекундах. Если в течение этого времени пользователь не нажимал клавиши, активизируется запрос. Если используется локальный запрос (к данным, находящимся непосредственно в файле), задержку можно сильно уменьшить. Например до 40ms. (По умолчанию: 400).
cacheLength – число ответов от сервера, сохраняемых в кэше. Если установлено в 1 – кэширование данных отключено. Никогда не устанавливайте меньше единицы. (По умолчанию: 1).
matchSubset – использовать ли кэш для уточнения запросов. Использование этой опции может сильно снизить нагрузку на сервер и увеличить производительность. Не забудьте при этом еще и установить для cacheLength значение побольше. Например 10. (По умолчанию: 1).
matchCase – использовать ли сравнение чувствительное к регистру символов (только если Вы используете кэширование). (По умолчанию: 0).
maxItemsToShow – ограничивает число результатов, которые будут показаны в выпадающем списке. Если набор данных содержит сотни элементов, может быть неудобно показывать весь список пользователю. Рекомендованное значение 10. (По умолчанию: -1).
extraParams – дополнительные параметры, которые могут быть переданы на сервер. Если Вы напишете {page:4}, то строка запроса к обработчику на сервере будет сформирована следующим образом: my_handler.php?q=foo&page=4 (По умолчанию: {}).
width – устанавливает ширину выпадающего списка. По умолчанию ширина выпадающего списка определена шириной элемента ввода. Однако, если ширина элемента ввода небольшая, а строки выпадающего списка содержат большое количество символов – эта опция вполне может пригодиться. (По умолчанию: 0).
selectFirst – если установить в true , то по нажатию клавиши Tab или Enter будет выбрано то значение, которое в данный момент установлено в элементе ввода. Если же имеется выбранный вручную («подсвеченный») результат из выпадающего списка, то будет выбран именно он. (По умолчанию: false).
selectOnly – если установить в true и в выпадающем списке только одно значение, оно будет выбрано по нажатию клавиши Tab или Enter, даже если этот пункт не был выбран пользователем с помощью клавиатуры или указателя мыши. Заметьте, что эта опция отменяет действие опции selectFirst . (По умолчанию: false).
formatItem – JavaScript функция, которая поможет обеспечить дополнительную разметку элементов выпадающего списка. Функция будет вызываться для каждого элемента LI . Возвращаемые от сервера данные могут быть отображены в элементах LI выпадающего списка (см. второй пример). Принимает три параметра: строка результата, позиция строки в списке результатов, общее число элементов в списке результатов. (По умолчанию: none).
onItemSelect – JavaScript функция, которая будет вызвана, когда элемент списка выбран. Принимает единственный параметр – выбранный элемент LI . Выбранный элемент будет иметь дополнительный атрибут «extra», значением которого будет являться массив всех ячеек строки, которая была получена в качестве ответа от сервера. (По умолчанию: none).
Последние две опции весьма важны, если Вы хотите сделать действительно удобный и полезный элемент интерфейса, поэтому приведу примеры.
Function liFormat (row, i, num) { var result = row + "" + row + " тыс.чел."; return result; }
В опции formatItem мы определили имя вызываемой функции – liFormat , а сама функция просто формирует строку, которая будет вставлена в соответствующий элемент LI . Строка содержит название поселка и элемент em , в который выводится количество проживающих там, в тысячах человек. Элемент em имеет класс qnt , с помощью которого, используя CSS , мы сдвигаем этот элемент вправо, немного уменьшаем размер шрифта и делаем сам шрифт зеленого цвета.
Следующий пример для опции onItemSelect :
Function selectItem(li) { if(li == null) var sValue = "Ничего не выбрано!"; if(!!li.extra) var sValue = li.extra; else var sValue = li.selectValue; alert("Выбрана запись с ID: " + sValue); }
Здесь видно как можно работать со значениями атрибута «extra» выбранного элемента LI . В примере мы выводим в alert значение идентификатора для записи из нашей тестовой базы.
Нам осталось только разобрать те действия, которые будут выполняться на стороне сервера. Как Вы наверное помните, мы выбрали для этого PHP . Вспомним также, что на сервер передается GET-запрос с параметром q , содержащим уже введенные пользователем символы. Сам код Вы сможете посмотреть, скачав файл примера.
Весь код мы будем выполнять только в случае существования XMLHttpRequest , только если передан GET-запрос с параметром q . Для примера используется текстовый файл, в котором содержится база данных. Вот фрагмент этого файла:
1:Пашковский:Краснодарский край:43,0 2:Горячеводский:Ставропольский край:34,4 3:Калинино:Краснодарский край:34,1 4:Приволжский:Саратовская область:32,0 . . . . . . . . . . . . . . . . . . . 268:Залари:Иркутская область:10,0 269:Октябрьский:Пермский край:10,0 270:Ишеевка:Ульяновская область:10,0 271:Жешарт:Республика Коми:10,0 272:Прохоровка:Белгородская область:10,0
Мы читаем этот файл в массив, а затем в цикле перебираем все строки, в свою очередь разбивая каждую из них в массив, к элементу под номером один (название поселка) которого обращаемся для поиска соответствия с переданным GET-запросом. Если соответствие будет найдена выводим информацию, правда в несколько ином порядке, чем она хранилась в файле.
Такой подход выбран во-первых, потому что это пример, который должен быть очень просто воспроизведен на любом другом сайте, и во-вторых, чтобы при очень небольшом объеме данных дать почувствовать тот момент, когда запрос выполняется.
Вот собственно и все, обращу разве Ваше внимание на то, что для работы со строками использую.
Disclaimer (Attention detected!)
Сразу заявляю, что ни один из существующий, а также фреймворков будущего, и близко не стоит рядом с $mol. Я ни в коем случае не утверждаю, что какой-либо иной фреймворк круче чем $mol, потому что с $mol просто невозможно соревноваться в крутости. Это самый крутой фреймворк из когда-либо созданных человечеством. Уверен именно $mol спасет мир!Ну, а теперь можно поговорить о Svelte) Так как это пятничный пост, постараюсь его сильно не затягивать.
Итак, задача сделать переиспользуемый микро-компонент автодополнения с поддержкой асинхронной подгрузки списка вариантов. Иными словами, начинаем ввод искомого значения - выпадает список вариантов, который может задаваться как статически (некий массив), а так и подгружаться динамически с сервера.
Собственно сам svelte-компонент может выглядеть так:
{{#await suggestions}}
{{then options}}
{{#each options as option}}
{{ option }}
{{/each}}
{{/await}}
export default {
data: () => ({
search: "",
suggestions:
})
};
Ремарка
Внимательный читатель сразу заметит своеобразный «life-hack», который тут присутствует. А именно использование html5-тега , который фактически и создавался для подобных вещей, однако до сих пор имеет слабую поддержку браузерами .
Хочу отметить, что использую его здесь чисто в демонстрационных целях, чтобы визуально упростить код для лучшего понимания, а также потому что конкретная реализация выпадающего списка не является целью статьи. Переделать список с на
В итоге, у нас имеется простенький шаблон с полем для ввода и привязанным к нему списком вариантов. Поле для ввода биндится на переменную «search» в данных компонента, а список вариантов задается динамически с помощью массива «suggestions».
Обратите внимание на {{#await /}} в шаблоне. Именно эта простая конструкция позволяет нам не беспокоиться является ли переменная «suggestions» реальным массивом или же это промис, который будет разрешен в массив.
Здесь пожалуй все, теперь перейдем к использованию:
Selected location: {{ location }}
import Autocomplete from "./Autocomplete.html"
import { fetchLocations } from "./api.js"
export default {
data: () => ({
location: ""
}),
computed: {
locations: location => {
return location.length >= 3 ? fetchLocations(location) :
}
},
components: {
Autocomplete
}
};
Это некий родительский компонент, который реализует domain-логику конкретного кейса. В данном случае - это выбор локации (города).
Сначала подключается компонент автодополнения, а также некий модуль, реализующий взаимодействие с серверным API. У нас также есть переменная «location», куда мы собственно сохраняем выбранное значение. Она биндится на «search» из компонента автокомплита через props, а также выводится неким результирующим значением чуть выше.
Далее интересный момент. Так как Svelte поддерживает вывод асинхронных значений через {{#await /}}, а также вычисляемые свойства (computed props), которые могут зависеть от других данным, мы можем написать супер простое вычисляемое свойство для получения списка вариантов с сервера и подвязать его на изменение «location». Т.е. когда пользователь вводит значение в поле, реактивная переменная «location» изменяется, что приводит к пересчету вычисляемого свойства «locations». Данное свойство также биндится на «suggestions» из компонента автокомплита через props. И все работает как «магия»))))
Отмечу также, что для того, чтобы пример работал хорошо, необходима реализация метода debounce, чтобы не завалить сервер лишними запросами. В данном случае, подразумевается, что debounce уже реализуется внутри функции fetchLocations(), потому как он не имеет прямого отношения к примеру.
Вот так вот, супер просто можно реализовать переиспользуемый микро-компонент автодополнения на Svelte.
Далее, так как к предыдущей статетье про Svelte было задано много вопросов, касающихся принципа работы Svelte, AoT-компиляции svelte-компонентов и вероятным дублированием кода. Представляю вольный перевод вот этого комментария создателя Svelte Рича Харриса (Rich Harris):
Это хороший вопрос. Я бы ответил на него несколькими способами:От себя хочу добавить, что еще не пробовал Svelte на более-менее крупном проекте (хотя и планирую). Также я не противопоставляю его таким гигантам как Angular или даже Vue. На том поле скорее играет Ractive, чем Svelte.
Однако, считаю что он прекрасно занимает нишу небольших (виджеты и т.п.) и средних проектов (мобильные и ТВ приложения и т.п.). В таких проектах Svelte несомненно обеспечивает меньший размер бандла и большую скорость работы. Если для вас это актуально, вам стоит познакомиться с ним поближе.
Всем хороших выходных! И да прибудет с вами Сила пятницы!
UPDATE:
Для тех, кто обеспокоен дублированием кода в Svelte. Есть новая информация непосредственно от Рича Харриса. Мой комментарий на эту тему можно прочитать
Виджет Autocomplete
Виджет Autocomplete облегчает ручной ввод информации, предлагая на выбор пользователю варианты автоматического заполнения текстовых полей по мере ввода символов. Продуманное использование этого виджета обеспечивает значительную экономию времени за счет ускорения ввода данных и снижения вероятности ошибок ввода.
Создание виджета AutocompleteЧтобы создать элемент управления автозаполнением, следует вызвать метод autocomplete() для соответствующего элемента input. Пример использования этого метода, в котором демонстрируется базовая функциональность виджета Autocomplete, приведен ниже:
jQuery UI $(function() { var flowers = ["Астра", "Нарцисс", "Роза", "Пион", "Примула", "Подснежник", "Мак", "Первоцвет", "Петуния", "Фиалка"]; $("#acInput").autocomplete({ source: flowers }) }); Выберите название цветка:
Метод autocomplete() работает аналогично любому другому методу jQuery UI из тех, с которыми вы уже познакомились, за исключением того, что ему необходимо передавать объект отображения, содержащий значение опции source. Эта опция позволяет указать источник, из которого должны извлекаться данные для автозаполнения. В примере роль такого источника играет простой массив значений.
На рисунках ниже показано, в каком виде средство автозаполнения предстает перед пользователем:
На этом рисунке представлены два экранных снимка. Первый из них соответствует ситуации, когда пользователь вводит букву "а". Вы видите, что это приводит к появлению списка цветов, названия которых включают букву "а". В список вошли не только астры, название которых начинается с буквы "а", но и названия других цветов, в которых также содержится буква "а".
После ввода второй буквы ("к") список сокращается до одного названия (Мак), содержащего введенное сочетание букв ("ак"). Виджет Autocomplete не проверяет правильность введенных данных, и пользователь может вводить в текстовом поле любые значения, а не только те, которые определены опцией source.
Заметьте, что никаких специальных мер по сортировке массива, указанного с помощью опции source, мы не предпринимали. За нас это автоматически сделала библиотека jQuery UI. Кроме того, как будет показано далее, возможные варианты продолжения ввода могут поступать из нескольких источников.
В приведенном примере документа элементы input и label помещены в элемент div, которому присвоен класс ui-widget. Тем самым обеспечивается совпадение CSS-свойств шрифтов, используемых в этих элементах и в раскрывающемся списке виджета Autocomplete.
Использование массива объектов в качестве источника данныхВ качестве источника элементов списка автозаполнения вместо строк могут использоваться массивы объектов. Это дает возможность отделить ярлык, отображаемый в раскрывающемся списке, от значения, подставляемого в текстовое поле. Соответствующий демонстрационный пример приведен ниже:
$(function() { var flowers = [{label: "Астры (бордовые)", value: "Астры"}, {label: "Нарциссы(белые)", value: "Нарциссы"}, {label: "Розы (розовые)", value: "Розы"}, {label: "Пионы (розовые)", value: "Пионы"}] $("#acInput").autocomplete({ source: flowers }) });
Когда используется массив объектов, средство автозаполнения ищет свойства label и value. Свойство label используется для создания ярлыков, отображаемых в раскрывающемся списке, а свойство value - для вставки значений в поле ввода при выборе соответствующего ярлыка. В данном случае ярлыки содержат информацию об оттенках цветов, которая не включается в значения. Результат приведен на рисунке:
Виджет Autocomplete поддерживает ряд настраиваемых свойств, позволяющих управлять различными аспектами его поведения. Перечень этих свойств приведен в таблице ниже. Возможности настройки виджета Autocomplete описаны в следующих разделах.
| appendTo | Определяет элемент, к которому должен быть присоединен раскрывающийся список элементов автозаполнения. По умолчанию таковым является элемент body |
| autoFocus | Если эта опция равна true, то фокус автоматически устанавливается на первом элементе раскрывающегося списка, что позволяет выбирать его простым нажатием клавиши . Значение по умолчанию - false |
| delay | Устанавливает длительность периода задержки (в миллисекундах) после нажатия клавиши, по истечении которого будет срабатывать автозаполнение. Значение по умолчанию - 300 |
| disabled | Установка значения true приводит к отключению средства автозаполнения. На базовый элемент input эта опция никакого влияния не оказывает. Значение по умолчанию - false |
| minLength | Определяет минимальное число символов, ввод которых будет инициировать отображение раскрывающегося списка элементов автозаполнения. Значение по умолчанию - 1 |
| source | Устанавливает источник данных для добавления в раскрывающийся список элементов автозаполнения. Значения по умолчанию для этого свойства не существует, и поэтому указание необходимого значения при вызове метода autocomplete() является обязательным |
Из всех настроек виджета Autocomplete наибольший интерес представляет опция source, поскольку она обеспечивает возможность выбора самых различных источников данных для включения в раскрывающийся список элементов автозаполнения. С ролью простых статических списков отлично справляются массивы JavaScript, которые использовались в предыдущем примере. В более сложных ситуациях необходимые данные могут поступать с сервера. Для этого потребуется лишь указать URL-адрес источника данных, как показано в примере ниже:
$(function() { $("#acInput").autocomplete({ source: "phphandler.php" }) });
Как только средству автозаполнения понадобятся данные, jQuery UI выполнит HTTP-запрос по указанному URL-адресу, используя метод GET. Введенные к этому времени пользователем символы включаются в строку запроса с помощью ключевого слова term . Например, если пользователь введет букву "a", то jQuery UI направит следующий запрос:
http://localhost/phphandler.php?term=a
http://localhost/phphandler.php?term=ac
Описанную методику удобно применять в тех случаях, когда имеется множество данных, которые нежелательно пересылать сразу все. Она также будет полезна, если список данных для автозаполнения динамически обновляется и вы хотите, чтобы пользователь имел доступ к самым свежим данным.
За получение значения term из строки запроса и возврат JSON-строки, представляющей массив элементов, отображаемых для пользователя, отвечает сервер. Простой серверный сценарий PHP, пригодный для этих целей, приведен ниже:
В этом сценарии используется тот же набор названий цветов, что и в предыдущем примере, и возвращаются значения, которые соответствуют поисковому выражению, определяемому ключевым словом term запроса, полученного от браузера. Я незначительно изменил процедуру поиска таким образом, чтобы возвращались лишь те названия цветов, которые начинаются с поискового термина. Так, если jQuery UI отправляет строку запроса http://localhost/phphandler.php?term=a то сервер возвращает следующие данные JSON: ["Астры"] .
Поскольку поиск совпадений выполняется только в начале названий, список включает лишь один элемент, как показано на рисунке:
Эта методика действительно очень удобна, но может требовать отправки на сервер слишком большого количества запросов. Для рассмотренного примера это было не столь важно, поскольку выполнялся лишь простейший поиск, а мой сервер и браузер находятся в одной и той же сети. В то же время, в случае более сложных вариантов поиска в пределах глобальных сетей, когда возможны значительные задержки ответа, нагрузка на сервер может существенно возрасти.
Имеется возможность управлять частотой отправки запросов средством автозаполнения с помощью опций minLength и delay. Опция minLength позволяет указать минимальное количество символов, которые пользователь должен ввести, прежде чем jQuery UI направит соответствующий запрос серверу. Таким образом, к моменту отправки запроса пользователем уже будет введено несколько символов, и этой информации вам будет вполне достаточно, чтобы сузить область поиска.
С помощью опции delay можно указать время, которое должно пройти с момента ввода символа, прежде чем будет сделан запрос. Это позволяет избежать неоправданно частой отправки запросов при высокой скорости набора символов пользователем. Так, если пользователь введет буквы "a" и "c", то будет направлен только один запрос, соответствующий комбинации "ac", а не два мгновенно следующих один за другим отдельных запроса, соответствующих наборам букв "a" и "ac".
Совместно используя обе опции, можно уменьшить количество запросов и при этом по-прежнему предоставлять пользователю достаточный объем необходимой информации. Пример использования описанных опций настройки приведен ниже:
$(function() { $("#acInput").autocomplete({ source: "phphandler.php", minLength: 3, delay: 1000 }) });
В этом примере запрос будет инициироваться лишь после того, как пользователь наберет три символа, и при условии, что в течение одной секунды после этого не будет введен ни один дополнительный символ.
Использование функции в качестве источника данныхДля создания источника элементов автозаполнения, в полной мере приспособленного к конкретным потребностям пользователей, можно использовать функцию. Эта функция также указывается с помощью опции source и вызывается всякий раз, когда средство автозаполнения должно отображать возможные варианты продолжения ввода для пользователей. Соответствующий пример приведен ниже:
$(function() { var flowers = ["Астра", "Нарцисс", "Роза", "Пион", "Примула", "Подснежник", "Мак", "Первоцвет", "Петуния", "Фиалка"]; $("#acInput").autocomplete({ source: function(request, response) { var term = request.term; var pattern = new RegExp("^" + term, "i"); var results = $.map(flowers, function(elem) { if (pattern.test(elem)) { return elem; } }) response(results); } }) });
Мы передаем этой функции два аргумента. Один из них - это объект с единственным свойством term. Значением этого свойства является строка символов, введенных пользователем. Второй аргумент - это функция, которая вызывается, когда уже сгенерирован список элементов автозаполнения для отображения пользователю. Аргументом этой функции является массив строк или объектов.
В данном случае мы воспроизводим функциональность, которая использовалась на стороне сервера в предыдущем примере, и генерируем массив, включающий лишь те элементы автозаполнения, которые начинаются с заданного выражения. Далее результаты передаются обратно jQuery UI путем передачи массива функции response() в качестве аргумента.
Данный способ обработки результатов не совсем обычен, но работает вполне удовлетворительно, и генерируемые элементы отображаются для пользователя, так что конечный результат получается тем же, что и в случае применения серверного сценария PHP.
Использование методов виджета AutocompleteВиджет Autocomplete поддерживает ряд методов, которые можно использовать для управления процессом автозаполнения. Эти методы перечислены в таблице ниже:
| autocomplete("close") | Закрывает раскрывающийся список элементов автозаполнения |
| autocomplete("destroy") | Полностью удаляет функциональность автозаполнения из элемента input |
| autocomplete("disable") | Приостанавливает работу виджета Autocomplete для базового элемента |
| autocomplete("enable") | Возобновляет работу ранее приостановленного виджета Autocomplete |
| autocomplete("option") | Устанавливает значения одного или нескольких свойств |
| autocomplete("search", значение) | Запускает процедуру поиска элементов автозаполнения, соответствующих указанному значению. Если аргумент значение не предоставлен, используется содержимое элемента input |
Специфичными для средства автозаполнения являются два метода - search и close. Их можно использовать для программного запуска и остановки процесса автозаполнения, как показано в примере ниже:
... $(function() { var flowers = ["Астра", "Нарцисс", "Роза", "Пион", "Примула", "Подснежник", "Мак", "Первоцвет", "Петуния", "Фиалка"]; $("#acInput").autocomplete({ source: flowers, minLength: 0, delay: 0 }) $("button").click(function(e) { e.preventDefault(); switch (this.id) { case "close": $("#acInput").autocomplete("close"); break; case "input": $("#acInput").autocomplete("search"); break; default: $("#acInput").autocomplete("search", this.id); break; } }) }); п с Содержимое вывода Закрыть Выберите название цветка:
В этом примере мы добавили некоторые кнопки и использовали метод click() для настройки различных вызовов метода autocomplete(). При нажатии кнопок, обозначенных как "П" и "С", вызывается метод search, которому выбранная буква передается в качестве поискового выражения. Это приводит к запуску средства автозаполнения с использованием выбранной буквы, независимо от содержимого текстового поля, как показано на рисунке:
Как показано на рисунке, в раскрывающемся списке отображаются элементы, которые содержат букву, указанную на нажатой кнопке.
Кнопка "Содержимое ввода" запускает средство автозаполнения с использованием тех символов, которые содержатся в текстовом поле. При настройке средства автозаполнения свойству minLength было присвоено значение 0, в результате чего после щелчка на кнопке "Содержимое ввода" в списке ввода отображаются сразу все элементы автозаполнения, как показано на рисунке ниже. Если пользователь введет какие-либо символы в поле ввода, то отобразятся лишь элементы, содержащие введенную строку:
С виджетом Autocomplete связан ряд событий, которые перечислены в таблице ниже:
| change | Происходит, когда фокус ввода выходит за пределы текстового поля после изменения содержащегося в нем значения |
| close | Происходит при закрытии раскрывающегося списка элементов автозаполнения |
| create | Происходит при инициализации экземпляра виджета Autocomplete для данного элемента |
| focus | Происходит, когда элемент автозаполнения получает фокус в раскрывающемся списке |
| open | Происходит при открытии раскрывающегося списка элементов автозаполнения |
| search | Происходит перед генерацией раскрывающегося списка элементов автозаполнения или перед поиском в нем подходящих элементов |
| select | Происходит при выборе элемента списка автозаполнения |
В jQuery UI можно получить дополнительную информацию о событии с помощью второго аргумента функции-обработчика, обычно обозначаемого как ui. В случае событий change, focus и select jQuery UI наделяет объект ui свойством item, возвращающим объект, который описывает выбранный или получивший фокус элемент раскрывающегося списка. Пример, в котором демонстрируется использование этой возможности для получения информации о выбранном элементе, приведен ниже:
... $(function() { var flowers = ["Астра", "Нарцисс", "Роза", "Пион", "Примула", "Подснежник", "Мак", "Первоцвет", "Петуния", "Фиалка"]; $("#acInput").autocomplete({ source: flowers, focus: displayItem, select: displayItem, change: displayItem }) function displayItem(event, ui) { $("#itemLabel").text(ui.item.label) } }); Выберите название цветка: Значение элемента:
В этом примере добавлен элемент span, который используется для отображения свойства label выбранного объекта. Объекты со свойствами label и value создаются jQuery UI даже тогда, когда вы задаете в опции source простой массив строк, поэтому одно из этих свойств объекта ui.item вам всегда приходится считывать. В данном примере для событий focus, select и change используется одна и та же функция, отображающая значение элемента. Результат представлен на рисунке:
Для события select предусмотрено действие по умолчанию, которое заключается в замене содержимого элемента input содержимым свойства value элемента, выбранного в раскрывающемся списке. Это как раз то, что необходимо в большинстве случаев, но можно использовать данное событие и для того, чтобы либо дополнить действие по умолчанию, либо полностью отменить его и выполнить какие-то другие действия, которые вам нужны.
Пример дополнения действия по умолчанию установкой значения связанного текстового поля приведен ниже:
... $(function() { var flowers = ["Астра", "Нарцисс", "Роза"]; var skus = {Астра: 100, Нарцисс: 101, Роза: 102}; $("#acInput").autocomplete({ source: flowers, select: function(event, ui) { $("#sku").val(skus); } }) }); Выберите название цветка: Отдел склада:
Когда происходит событие select, функция-обработчик использует аргумент ui для получения значения выбранного элемента и установки значения связанного поля, в данном случае - поля "Отдел склада", которое получается из объекта skus. Тем самым мы можем помогать пользователям, предоставляя значения по умолчанию для других полей на основе первоначального выбора.
Это может пригодиться во множестве ситуаций, особенно при выборе таких элементов, как адреса доставки. Результаты представлены на рисунке ниже:
Последнее обновление: 1.11.2015
Виджет autocomplete предназначен для создания специальных полей ввода с функцией автозаполнения:
В качестве источника автозаполнения указываем какой-нибудь массив и потом применяем виджет.
Подключение виджета к внешнему источникуВ предыдущем примере источник для списка автозаполнения задавался локально. Однако мы можем также динамически подключаться к какому-нибудь скрипту на сервере, который бы нам возвращал список вариантов для автозаполнения. В нашем случае это будет скрипт php. Пусть он будет выглядеть следующим образом:
Выходная переменная $output содержит весь список в формате json. В реальности, конечно, все элементы списка, скорее всего, будут извлекаться из БД, но я для простоты упростил пример.
По сути каждый элемент списка - это объект, у которого определены два свойства: label (отображаемая метка) и value (само значение). В данном случае оба свойства по значению совпадают.
На стороне клиента прием мог бы выглядеть следующим образом:
$("input#lang").autocomplete({ source: function(request,response) { $.getJSON("json.php", { filter: $("input#lang").val() }, function(data){ var suggestions = ; // массив для хранения результатов $.each(data, function(key, val) { suggestions.push(val.value); // добавляем все элементы }); response(suggestions); }); } });
Таким образом, мы динамически получаем введенные в поле ввода символы и передаем их в запросе на сервер. На сервере эти символы используются в качестве фильтра, а в ответ клиенту возвращается набор отфильтрованных записей.
Стилизация виджетаПри применении виджета к элементу input к данному элементу добавляется класс ui-autocomplete-input . А область списка автозаполения представляет собой список ul:
Изменив стили соответствующих классов, мы можем настроить отображение списка:
li.ui-menu-item { font-size: 12px; font-faminy: Verdana; } $(function(){ var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ; $("input#lang").autocomplete({ source: langs }); });
Свойства виджетаВиджет имеет следующие свойства:
appendTo: указывает, какой элемент будет включать список для автозаполенния:
$(function(){ var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ; $("input#lang").autocomplete({ appendTo: "#langsList", source: langs }); });
autoFocus: при установке данного свойства в true выделяется первый элемент списка автозаполнения. По умолчанию свойство имеет значение false .
delay: указывает в миллисекундах время задержки до показа списка автозаполенния ($("#langs").autocomplete({ delay: 500 });). По умолчанию данное свойство равно 300
disabled: при установке у свойства значения true отключает виджет. По умолчанию имеет значение false .
minLength: указывает на минимальное количество символов, которое должен ввести пользователь, чтобы отобразился список автозаполнения: $("#langs").autocomplete({ minLength: 0 }); . По умолчанию данное свойство имеет значение 1.
position: используя данное свойство, можно задать положение списка на странице. Объект, с помощью которого можно задать положение, использует ряд опций, список которых можно найти на странице https://api.jqueryui.com/position/ . По умолчанию свойство имеет значение { my: "left top", at: "left bottom", collision: "none" } . Опция my указывает на позицию элемента списка автозаполнения, относительно которой идет выравнивание с элементом ввода. То есть left top выравнивает относительно левого верхнего угла. Опция at указывает уже позицию элемента ввода, относительно которой будет выравниваться список автозаполнения. Опция collision дополнительно настраивает отображение списка.
Мы можем изменить начальные параметры, например, $("input#lang").autocomplete({ position: { my: "right top", at: "right bottom", collision: "fit" }, source: langs });
source: задает источник для автозаполнения. Это может быть массив, который можно задать в качестве внешнего массива или прямо при свойстве: $("input#lang").autocomplete({ source: ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"]});
Виджет autocomplete имеет следующие методы:
autocomplete("close"): закрывает список ($("#lang").autocomplete("close");)
autocomplete("disable"): отключает виджет
autocomplete("enable"): подключает виджет автозаполнения
autocomplete("destroy"): удаляет функциональность автозаполнения у элемента
autocomplete("widget"): возвращает объект jQuery, представляющий виджет (var widget = $("#lang").autocomplete("widget");)
autocomplete("option"): позволяет получить или установить значения свойств виджета. Например, установим и получим значение свойства collapsible:
Var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ; $("input#lang").autocomplete({ source: langs}); $("input#lang").autocomplete("option", { autoFocus: true });
autocomplete("search", "value"): производит поиск по списку так с учетом значения value. Например, метод $("#lang").autocomplete("search", "i"); будет эквивалентен действию ввода символа "i" в текстовое поле. И затем буду отображены все элементы списка, в которых присутствует символ "i"
С помощью обработки следующих событий виджета мы можем произвести определенные действия в ответ на действия пользователя:
change(event, ui) : событие возникает после изменения выбранного элемента.
Параметр event содержит объект события, а параметр ui представляет объект, который содержит информацию о выбранном элементе:
Var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ; $("input#lang").autocomplete({ source: langs}); $("input#lang").autocomplete({ change: function(event, ui) { console.log(ui.item.value); } });
Используя свойство ui.item , мы получаем выбранный элемент. Элемент определен в виде объекта {label, value}, поэому, чтобы получить значение выбранного элемента, используем свойство value
close(event, ui) : возникает при закрытии списка автозаполнения
create(event, ui) : возникает при создании виджета
focus(event, ui) : возникает при передаче фокуса элементу
open(event, ui) : возникает при открытии или отображении списка автозаполнения
response(event, ui) : возникает после завершения поиска, но перед тем, как список результатов автозаполнения появится на экране. Чтобы получить все результаты списка, надо использовать объект ui.content , который представляет массив:
Var langs = ["Java", "JavaScript", "VisualBasic", "PHP", "Pascal"] ; $("input#lang").autocomplete({ source: langs}); $("input#lang").autocomplete({ response: function(event, ui) { for (var i = 0; i
Чтобы удалить сохраненные в браузере поисковые запросы:
Запросы в поисковой строке ЯндексаЕсли вы авторизованы в Яндексе, то ваши запросы сохраняются по умолчанию – при повторном вводе они будут выделены фиолетовым. Кроме этого, сайты, на которые вы часто заходите, отображаются первыми в списке поисковых подсказок.