Как создать Datalist, который мгновенно доступен для поиска
Раскрывающиеся списки — это удобный способ предоставления опций для поля ввода, особенно когда список доступных опций длинный. Пользователь может выбрать нужный вариант, введя его в поле, или просмотреть параметры, которые могут соответствовать тому, что они ищут. Однако возможность поиска вариантов является идеальным решением.
Такое поведение может быть достигнуто с HTML-элемент, отображающий предложения ввода для различных элементов управления, таких как тег. Однако
Мы можем сделать поле ввода более удобным, если мы дадим пользователям доступ к полному списку опций в любое время в процессе ввода.
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)
Читайте также: типы ввода форм HTML5: дата, цвет и диапазон
В этом посте мы рассмотрим, как создать раскрывающийся список, в который можно выполнить поиск в любое время, используя
Начальный Datalist2. Сделать Datalist видимым
По умолчанию
Однако существует способ «заставить» содержимое списка данных (то есть все его параметры) отображаться на веб-странице. Нам нужно только дать ему подходящее значение свойства display, отличное от none, например display: block ;.
datalist {
дисплей: блок;
}
Отображаемые параметры еще не доступны на данный момент, браузер отображает только те параметры, которые он находит внутри списка данных.
Datalist Made VisibleКак уже упоминалось, из-за встроенного поведения
Видимый Datalist с предложениямиНам также нужно найти механизм, чтобы сделать все параметры (на приведенном выше снимке экрана, отображаемом под раскрывающимся списком данных), выбираемые в любой другой точке процесса ввода ввода — когда пользователи хотят проверить параметры перед тем, как они что-либо введут, или когда они уже что-то перенесли в поле ввода.
3. Ввести
- Мы можем добавить обработчик события щелчка для каждого параметра и использовать его для выбора параметра при его нажатии, или мы также можем преобразовать параметры в реальный раскрывающийся список, который по умолчанию можно выбрать.
- Мы можем обернуть варианты данных с помощью Элемент HTML.
Мы выберем второй метод, поскольку он проще, и его можно использовать в качестве резервного механизма в браузерах, которые не поддерживают
По умолчанию элемент select не отображается в браузерах, которые поддерживают datalist, то есть до тех пор, пока мы не заставим datalist отображать его содержимое с помощью display: block; Правило CSS.
Итак, когда мы обернем параметры из приведенного выше примера (где у datalist есть display: block) с
Datalist в сочетании с
Добавление атрибута нескольких к
datalist {
дисплей: нет;
}
Нам также нужно добавить следующую кнопку над списком данных в файле HTML:
Теперь давайте посмотрим на JavaScript. Сначала мы определим начальные переменные.
button = document.querySelector (‘button’);
datalist = document.querySelector (‘datalist’);
select = document.querySelector (‘select’);
options = select.options;
Затем нам нужно добавить прослушиватель событий (toggle_ddl) к событию click кнопки, которое будет переключать внешний вид списка данных.
button.addEventListener (‘click’, toggle_ddl);
Затем мы определяем функцию toggle_ddl (). Для этого нам нужно проверить значение свойства datalist.style.display. Если это пустая строка, список данных скрыт, поэтому нам нужно установить его значение на блокировку, а также изменить кнопку с стрелки, указывающей вниз, на стрелку, направленную вверх.
function toggle_ddl () {
/ * если DDL скрыт * /
if (datalist.style.display === ») {
/ * показать DDL * /
datalist.style.display = ‘block’;
this.textContent = «A ¢ A-a²»;
}
иначе hide_select ();
}
function hide_select () {
/ * скрыть DDL * /
datalist.style.display = »;
button.textContent = «A ¢ A-¼»;
}
Функция hide_select () скрывает список данных, устанавливая свойство datalist.style.display обратно в пустую строку и изменяя стрелку кнопки назад, чтобы она указывала вниз.
В окончательной настройке, если поля ввода содержат ранее выбранный параметр, а раскрывающийся список также был вызван более поздним нажатием кнопки, предварительно выбранный параметр также должен отображаться как выбранный в раскрывающемся списке.
Итак, давайте добавим следующий выделенный код в функцию toggle_ddl ():
function toggle_ddl () {
/ * если DDL скрыт * /
if (datalist.style.display === ») {
/ * показать DDL * /
datalist.style.display = ‘block’;
this.textContent = «A ¢ A-a²»;
var val = input.value;
for (var i = 0; i <options.length; i ++) {
если (варианты[i].text === val) {
select.selectedIndex = i; перемена;
}
}
}
иначе hide_select ();
}
function hide_select () {
/ * скрыть DDL * /
datalist.style.display = »;
button.textContent = «A ¢ A-¼»;
}
Мы также хотим скрыть раскрывающийся список, когда пользователь вводит данные в поле ввода (в момент появления рабочего списка данных).
/ * когда пользователь хочет ввести текстовое поле, скрыть DDL * /
input = document.querySelector (‘input’);
input.addEventListener (‘focus’, hide_select);
- Обновить ввод, когда выбран вариант
Наконец, давайте добавим обработчик события изменения к
/ * когда пользователь выбирает опцию из DDL, запишите ее в текстовое поле * /
select.addEventListener ( ‘изменение’, fill_input);
function fill_input () {
input.value = параметры[this.selectedIndex].ценность;
hide_select ();
}
Недостатки
Основным недостатком этой техники является отсутствие прямого способа стилизации
Кроме того, в Firefox входной текст сопоставляется с параметрами, которые содержит вводимые символы, в то время как другие браузеры соответствуют параметрам, которые начинается с эти персонажи. W3C спецификация поскольку datalist не указывает явно, как должно выполняться сопоставление.
Кроме этого, этот метод хорош и работает во всех основных браузерах, тогда как в браузерах, где он может не работать, пользователи все равно могут видеть раскрывающийся список, только предложения не появятся.
Посмотрите финальную демонстрацию с небольшим количеством стилей CSS ниже:
Увидеть перо Поиск в выпадающем списке с использованием Datalist Прети (@rpsthecoder) на CodePen,
Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)