Як створити Datalist Це миттєво пошуку
Випадаючі списки є акуратним способом надання варіантів для поля введення, особливо, якщо список доступних опцій довгий. Користувач може вибрати потрібний параметр введення в полі, або перегляньте варіанти це може відповідати тому, що вони шукають. Можливість шукати варіанти, однак, це ідеальне рішення.
Таку поведінку можна досягти за допомогою Цей елемент HTML відображає пропозиції вводу для різних елементів керування, таких як
. Однак
відображає лише доступні опції, коли користувач має вже набрали щось у поле введення.
Ми можемо зробити поле введення більш зручним, якщо ми дозволимо користувачам доступ до повного списку опцій у будь-який час під час процесу введення даних.
У цій публікації ми побачимо, як створити випадаючого списку, який можна шукати в будь-який час за допомогою і
Елементи HTML і невеликий JavaScript.
1. Створіть Datalist з параметрами
По-перше, ми створюємо дані для різних текстових редакторів. Переконайтеся, що значення список
атрибут тег є таким же, як
id
з tag - це, як ми зв'язуємо їх один з одним.
2. Зробити Datalist видимим
За замовчуванням Елемент HTML є приховано. Ми бачимо це тільки, коли ми почати вводити вхідні дані у поле, до якого додається файл даних.
Однак є спосіб "примусити" вміст даних (тобто всі його варіанти) , щоб відобразитися на веб-сторінці. Нам потрібно лише надати йому відповідну відображення
вартість нерухомості окрім ні
, наприклад дисплей: блок;
.
datalist display: block;
Відображаються опції ще не можна вибрати на цьому етапі лише браузер надає параметри він знаходить усередині даних.
Як зазначено вище, внаслідок вбудованої поведінки елемент, частина опцій вже з'являється і вибирається, але тільки тоді, коли користувач починає вводити рядок, до якого може звернутися браузер знайдіть відповідний варіант.
Ми також повинні знайти механізм, який потрібно зробити все опцій (на наведеному вище знімку вікна, що відображається під випадаючим списком даних) вибирається в будь-яку іншу точку процесу введення даних - коли користувачі хочуть перевірити параметри перед тим, як ввести що-небудь, або поки вони вже щось взяли у поле введення.
3. Принесіть
Елемент HTML
Існує два способи, яким можна дозволити користувачам див. та виберіть усі опції коли вони хочуть:
- Ми можемо додати a натисніть обробник подій для кожної опції та використовуйте її, щоб вибрати опцію, коли вона натиснута, або ми також можемо перетворення опцій у справжній розкривний список, який, за замовчуванням, вибирається.
- Ми можемо оберніть опції даних з
Елемент HTML.
Ми виберемо другий метод, оскільки він простіший, і його можна використовувати як запасний механізм в браузерах, які не підтримують елемент. Коли веб-переглядач не може виконати візуалізацію та відображення даних, він надає
елемент з усіма його варіантами замість цього.
За замовчуванням виберіть
елемент не з'являється в браузерах, які підтримують дані, тобто, поки ми змусити datalist відображати його вміст з дисплей: блок;
Правило CSS.
Отже, коли ми оберніть опції з наведеного вище прикладу (де є даталіст дисплей: блок
) з HTML-тег, код виглядає так:
До побачити всі опції з виберіть
у випадаючому списку нам потрібно використовувати атрибути кілька
, щоб показати більше ніж один варіант, і розмір
кількість варіантів, які ми хочемо показати.
4. Додати кнопку перемикання
Повинен з'явитися повний список, що випадає тільки коли користувач натискає кнопку перемикання поруч із полем введення, в той час як користувач вводить робочий список даних. Давайте змінити відображення
значення даних до ні
, а також додати кнопку поруч із полем введення, яке перемикається відображення
значення datalist, і, отже, викликати появу виберіть
.
datalist display: none;
Ми також повинні додати наступну кнопку над списком даних у файлі HTML:
Тепер подивимося JavaScript. По-перше, ми визначаємо початкові змінні.
button = document.querySelector ('кнопка'); datalist = document.querySelector ('datalist'); select = document.querySelector ('select'); options = select.options;
Далі нам потрібно додати слухача події (toggle_ddl
) на подію натискання кнопки, яка буде перемикає зовнішній вигляд даних.
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 =" âÂ-² "; else hide_select (); функція hide_select () / * hide DDL * / datalist.style.display ="; button.textContent = "âÂ-¼";
The hide_select ()
функції приховує дані шляхом встановлення datalist.style.display
Властивість повертається до порожнього рядка і змінює кнопку зі стрілкою назад до точки вниз.
У кінцевому налаштуванні, якщо поля введення містять попередньо вибрану опцію, а випадаючий список також викликається пізнішим натисканням кнопки, вибраний параметр також має бути показано, як вибрано у розкривному списку.
Отже, додамо наступний виділений код toggle_ddl ()
функція:
function toggle_ddl () / * якщо приховано DDL * / if (datalist.style.display === ") / * показати DDL * / datalist.style.display = 'block'; this.textContent =" âVar-val = input.value, для (var i = 0; iМи також хочемо приховати розкривний список, коли користувач вводить текст у поле введення (на момент появи робочого списку даних).
/ * коли користувач хоче ввести в текстове поле, приховати DDL * / input = document.querySelector ('input'); input.addEventListener ('focus', hide_select);5. Оновлення входу, коли вибрано параметр
Нарешті, давайте додайте a
зміни
обробник подій до, так що коли користувач вибирає опцію з розкривного списку, його значення буде відображатися всередині
поле.
/ * коли користувач вибирає опцію з DDL, запишіть її в текстове поле * / select.addEventListener ('change', fill_input); function fill_input () input.value = options [this.selectedIndex] .value; hide_select ();Недоліки
Основним недоліком цієї методики є відсутність прямого способу стилю
елемент з CSS (зовнішній вигляд
і
теги змінюються в різних веб-переглядачах).
Крім того, в Firefox, вхідний текст відповідає параметрам містить вводяться символи, інші браузери відповідають параметрам Почнемо з цих символів. Спеціальність W3C для даних не визначає явно відповідності.
Крім цього, цей метод хороший і працює у всіх основних браузерах, в той час як у браузерах, де він може не працювати, користувачі все ще можуть бачити розкривний список, але лише пропозиції не з'являються.
Ознайомтеся з останньою версією демонстрації CSS нижче: