Как создать Datalist, который мгновенно доступен для поиска

Раскрывающиеся списки - отличный способ предоставление вариантов для поля ввода, особенно когда список доступных опций длинный. Пользователь может выбрать нужный вариант печатать в поле, или же просмотреть варианты это может соответствовать тому, что они ищут. Возможность поиска по опциям, Однако это идеальное решение.

Такое поведение может быть достигнуто с помощью HTML-элемент, который отображает предложения ввода для различных элементов управления, таких как тег. тем не мение показывает только доступные варианты, когда пользователь уже набрал что-то в поле ввода.

Мы можем сделать поле ввода более удобным, если мы позволим пользователям получить доступ к полному списку опций в любое время во время процесса ввода.

В этом посте мы увидим, как создать выпадающий список, который можно искать в любое время с использованием тег такой же как Я бы из тег - это то, как мы связываем их друг с другом.

2. Сделать Datalist видимым

По умолчанию HTML-элемент скрытый. Мы можем видеть это только тогда, когда мы начать вводить данные в области, к которой прикреплен поставщик данных.

Однако есть способ «форсировать» содержимое списка данных (то есть все его параметры) появляться на веб-странице. Нам нужно только дать ему подходящее дисплей стоимость имущества Кроме как никто, например Дисплей: блок;.

 datalist display: block;

Отображаемые параметры еще не выбраны на данный момент, только браузер предоставляет варианты он находит внутри данных.

Как уже упоминалось, из-за встроенного поведения элемент, часть опций уже появляется и доступна для выбора, но только когда пользователь начинает вводить строку, к которой браузер может найти подходящий вариант.

Нам также нужно найти механизм, чтобы сделать все параметры (на приведенном выше снимке экрана под раскрывающимся списком данных) по выбору в любая другая точка процесса ввода ввода - когда пользователи хотят проверить параметры до того, как они что-то наберут, или пока они уже что-то взяли в поле ввода.

3. Ввести Элемент HTML.

Мы выберем второй метод, так как он проще и его можно использовать как запасной механизм в браузерах, которые не поддерживают элемент. Когда браузер не может отобразить и отобразить список данных, он оказывает HTML-тег, код выглядит следующим образом:

Datalist в сочетании с Добавление множественный приписать тег, так что когда пользователь выбирает параметр из раскрывающегося списка, его значение будет отображаться внутри поле также. / * когда пользователь выбирает параметр из DDL, запишите его в текстовое поле * / select.addEventListener ('change', fill_input); function fill_input () input.value = options [this.selectedIndex] .value; hide_select (); Недостатки Основным недостатком этого метода является отсутствие прямого способа стилизовать элемент с CSS (появление а также