Flexdatalist - плагин автозаполнения с поддержкой
HTML5 элемент является весьма полезным в современном развитии веб-интерфейса. Тем не менее, это один из тех элементов, о которых мало кто знает.
Он работает на поле ввода, где вы можете автоопределение определенных значений для ввода. Настройки по умолчанию выглядят хорошо, и мы рассмотрели несколько советов по кодированию при создании крутых эффектов с автоматическими списками данных..
Тем не менее, это гораздо проще работать с плагином такие как Flexdatalist. Это поддерживает более широкий спектр браузеров и позволяет вам полностью настроить дизайн вашего datalist.
Не у всех есть потребность в функциях автозаполнения, а с собственными списками данных HTML5 вы можете не беспокоиться о плагине. Тем не менее, Flexdatalist, пожалуй, лучший, потому что он основывается на поведении отечественных даталистов добавить:
- Мобильная адаптивная поддержка
- Дополнительные описания для каждого элемента
- Варианты для нескольких выборов одновременно
- Пользовательские обработчики событий
Это все работает на jQuery, так ты будешь нужна копия последней версии чтобы запустить это. Это также поставляется с собственной таблицей стилей CSS который вы можете захотеть объединить в один файл CSS, чтобы уменьшить HTTP-запросы.
Ты можешь найти полная инструкция по настройке на главной демо-странице, которая включает в себя ссылки на скачивание файлов Flexdatalist.
Это действительно просто настроить, с только одна строка JavaScript. По умолчанию плагин предназначается для всех входов с классом .flexdatalist, так что простого добавления этого в ваш код должно быть достаточно, чтобы увидеть результаты.
Вы просто добавляете элемент внутри поля ввода, а Flexdatalist обрабатывает все остальное. Это будет автоматический стиль списка, включая необязательный описательный текст.
Самый простой способ добавить дополнительный текст через файл JSON что вы можете прикрепить к вашему входу через атрибут данных.
Например, если вы посмотрите демонстрационную страницу Flexdatalist, вы найдете “страны” поле ввода с атрибутом данных-Data = 'countries.json'. Это ссылается на удаленный файл, который сохраняет все исходные данные извне.
Слишком много этих полей вы можете немного замедлить страницу. Тем не менее, я не могу себе представить, что многие сайты будут запускать более одной формы данных на одной странице, не говоря уже о том, что даже с этим плагином jQuery они все еще довольно быстро.
Для начала просто посетите репозиторий GitHub и загрузите копию. Это включает в себя ссылка на главную демонстрационную страницу который также имеет полную документацию по настройке, параметры JavaScript и множество примеров фрагментов кода.
