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

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

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

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

Читайте также: типы ввода форм HTML5: дата, цвет и диапазон

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

Начальный Datalist2. Сделать Datalist видимым
По умолчанию

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

datalist {
    дисплей: блок;
}

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

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

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

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

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);

1. Обновить ввод, когда выбран вариант
   Наконец, давайте добавим обработчик события изменения к

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

/ * когда пользователь выбирает опцию из DDL, запишите ее в текстовое поле * /
select.addEventListener ( ‘изменение’, fill_input);
function fill_input () {
    input.value = параметры[this.selectedIndex].ценность;
    hide_select ();
}

Недостатки
Основным недостатком этой техники является отсутствие прямого способа стилизации

Email *