Домашня » Інструментарій » Flexdatalist - модуль автозаповнення з підтримкою

    Flexdatalist - модуль автозаповнення з підтримкою

    The HTML5 елемент дуже корисна в сучасній розробці фронтендів. Проте, це один з тих елементів, про які не знають багато розробників.

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

    Проте, набагато легше працювати з плагіном як от Flexdatalist. Це підтримує більш широкий масив браузерів і дозволяє повністю налаштувати дизайн вашого даталіста.

    Не у всіх є необхідність функцій автозаповнення, а з нативними файлами HTML5, можливо, вам не доведеться турбуватися про плагін. Проте Flexdatalist є, мабуть, найкращим, оскільки він є будується на нативному поводженні даних додавати:

    • Мобільна підтримка
    • Додаткові описи для кожного елемента
    • Параметри для декількох вибору одночасно
    • Спеціальні обробники подій

    Його все працює на основі jQuery, так ви будете потрібна копія останньої версії , щоб виконати цю роботу. Він також поставляється з власною таблицею стилів CSS які можна об'єднати в один файл CSS, щоб зменшити HTTP-запити.

    Ви можете знайти повні інструкції з налаштування на головній демонстраційній сторінці, яка містить посилання для завантаження файлів Flexdatalist.

    Це дуже просто налаштувати, з лише один рядок JavaScript. За замовчуванням плагін спрямовує всі входи з класом .flexdatalist, тому достатньо лише додати, що до вашого коду, щоб побачити результати.

    Ви просто додаєте всередині вашого поля введення, а Flexdatalist обробляє решту. Це буде автоматично створювати список, включаючи необов'язковий описовий текст.

    Найпростіший спосіб додати додатковий текст через файл JSON які ви можете додайте до входу через атрибут даних.

    Наприклад, якщо ви перевіряєте демонстраційну сторінку Flexdatalist, ви знайдете a “Країни” поля введення з атрибутом data-data = 'countries.json'. Це посилання на віддалений файл зберігає всі необроблені вхідні дані зовні.

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

    Щоб почати, просто відвідайте репозицію GitHub і завантажте копію. Це включає в себе a посилання на головну демонстраційну сторінку який також має повну документацію для налаштування, параметри JavaScript і багато зразків фрагментів коду, які потрібно обернути.