Головна » Кодування » Як створити Datalist Це миттєво пошуку

    Як створити Datalist Це миттєво пошуку

    Випадаючі списки є акуратним способом надання варіантів для поля введення, особливо, якщо список доступних опцій довгий. Користувач може вибрати потрібний параметр введення в полі, або перегляньте варіанти це може відповідати тому, що вони шукають. Можливість шукати варіанти, однак, це ідеальне рішення.

    Таку поведінку можна досягти за допомогою Цей елемент HTML відображає пропозиції вводу для різних елементів керування, таких як . Однак відображає лише доступні опції, коли користувач має вже набрали щось у поле введення.

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

    У цій публікації ми побачимо, як створити випадаючого списку, який можна шукати в будь-який час за допомогою тег є таким же, як id з tag - це, як ми зв'язуємо їх один з одним.
    Початковий даталіст
    2. Зробити Datalist видимим

    За замовчуванням Елемент HTML є приховано. Ми бачимо це тільки, коли ми почати вводити вхідні дані у поле, до якого додається файл даних.

    Однак є спосіб "примусити" вміст даних (тобто всі його варіанти) , щоб відобразитися на веб-сторінці. Нам потрібно лише надати йому відповідну відображення вартість нерухомості окрім ні, наприклад дисплей: блок;.

     datalist display: block;

    Відображаються опції ще не можна вибрати на цьому етапі лише браузер надає параметри він знаходить усередині даних.

    Datalist Made Visible

    Як зазначено вище, внаслідок вбудованої поведінки елемент, частина опцій вже з'являється і вибирається, але тільки тоді, коли користувач починає вводити рядок, до якого може звернутися браузер знайдіть відповідний варіант.

    Видимий DATALIST з пропозиціями

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

    3. Принесіть Елемент HTML.

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

     / * коли користувач вибирає опцію з DDL, запишіть її в текстове поле * / select.addEventListener ('change', fill_input); function fill_input () input.value = options [this.selectedIndex] .value; hide_select ();
    Недоліки

    Основним недоліком цієї методики є відсутність прямого способу стилю елемент з CSS (зовнішній вигляд і