Если вы видели приличное количество сайтов в своей жизни, вы наверняка отметили набор повторяющихся виджетов в большинстве из них. Среди этих виджетов есть окно поиска, виджет новостной рассылки и виджет автозаполнения текстового поля. Последний является широко используемым компонентом, особенно когда веб-сайту требуется поле, имеющее несколько возможных значений, но также и позволяющее создавать совершенно новые значения. Этот компонент принят так, что многие JavaScript-фреймворки имеют собственный виджет автозаполнения.
Еще несколько лет назад в этой ситуации не было нативного HTML-элемента, и разработчики реализовывали эту концепцию по-разному. Этот кусок головоломки HTML больше не хватает. Сегодня у нас есть элемент HTML под названием datalist который служит для этой цели. В этой статье мы узнаем, что это такое и как его использовать.
Что такое элемент данных?
Элемент datalist представляет собой набор элементов option, которые воплощают предопределенные опции для других элементов управления.
Таким образом, этот элемент можно рассматривать как оболочку для набора option s, которые выражают возможные значения, которые может принимать input , не ограничивая его только этими значениями. По умолчанию datalist и его дочерние элементы скрыты, поэтому вы не увидите их на веб-странице. Фактически, datalist должен быть связан с другим элементом с помощью атрибута list установленного для этих других элементов. Значение этого атрибута должно быть установлено на идентификатор используемого datalist .
Простой пример кода HTML, который использует этот элемент, показан ниже:
<input name="city" list="cities" /> <datalist id="cities"> <option value="Naples" /> <option value="London" /> <option value="Berlin" /> <option value="New York" /> <option value="Frattamaggiore" /> </datalist>
Приведенный выше код определяет input и элемент datalist который содержит несколько option s. Как вы можете видеть, у datalist есть «города» в качестве идентификатора, и input связывается с ним с помощью атрибута list (который также имеет «города» в качестве значений).
Демонстрационная версия кода показана ниже и доступна в виде JSFiddle .
Из-за своей природы этот элемент хорошо подходит для использования в сочетании с JavaScript. Например, вы можете выполнять Ajax-запросы к серверу для получения соответствующих значений на основе входных данных пользователя.
Пример показан в демонстрационном примере ниже, доступном как JSFiddle , где option datalist данных генерируются динамически.
До сих пор мы обсуждали, как мы можем автоматически заполнять текстовые поля, но это не единственная ситуация, когда мы можем использовать этот элемент HTML.
datalist и <input type="color">
Предыдущий пример хорош, но вы можете сделать еще больше с datalist . Что если вы хотите предложить цвет своим пользователям с помощью <input type="color"> ? В этом случае вы можете написать следующий код:
<input type="color" list="colors" /> <datalist id="colors"> <option value="#00000"/> <option value="#478912"/> <option value="#FFFFFF" /> <option value="#33FF99" /> <option value="#5AC6D9" /> <option value="#573905" /> </datalist>
Эта демонстрация в настоящее время хорошо поддерживается только Chrome 37 и Opera 24. Internet Explorer 11 показывает поле как текстовое поле, в то время как Firefox 32 не показывает предложенные цвета.
Демонстрационная версия кода показана ниже и доступна в виде JSFiddle .
datalist и <input type="range">
Другой пример использования связан с элементом <input type="range"> :
<input type="range" value="0" min="0" max="100" list="numbers" /> <datalist id="numbers"> <option value="20" /> <option value="40" /> <option value="60" /> <option value="80" /> </datalist>
В этом случае в браузерах, которые поддерживают эту демонстрацию (Internet Explorer, Opera и Chrome), линейка диапазона будет иметь четыре равноотстоящих вертикальных знака, по одному для каждого из значений, определенных в datalist .
Демонстрационная версия кода показана ниже и доступна в виде JSFiddle .
Поддержка браузера
CanIUse показывает, что datalist имеет очень хорошую поддержку среди настольных браузеров. Фактически он поддерживается старыми версиями Firefox, Chrome и Opera, а также Internet Explorer 10+. Это означает, что вы можете надежно использовать его в своих проектах. Safari не поддерживает его, поэтому пользователям Mac немного не повезло.
Есть несколько мобильных браузеров, которые реализовали этот элемент. Единственными браузерами, которые поддерживают его, являются Firefox и Chrome для мобильных устройств, а также последняя версия браузера Blackberry.
Polyfills
Если вы хотите обеспечить поддержку этого элемента в браузерах, которые его не понимают, вы можете использовать либо релевантные выпадающие списки, либо плагин списка данных HTML5 jQuery . Имейте в виду, что эти полифилы работают только в качестве замены в тех случаях, когда используется текстовое поле, а это означает, что нельзя использовать диапазоны или цвета полизаполнения.
Вывод
В этой статье я познакомил вас с элементом datalist и с тем, как его можно использовать для создания собственных виджетов автозаполнения. Как вы видели в показанных примерах, его можно использовать и с нетекстовыми полями, такими как цвета и диапазоны. Наконец, поддержка среди браузеров достаточно хороша, чтобы принять этот элемент в производство.
Знаете ли вы об этом элементе? Вы когда-нибудь использовали это? Давайте начнем обсуждение.