Реализация полей с автозаполнением при помощи элемента datalist

Если проанализировать большинство современных сайтов, то наверняка можно заметить наборы похожих виджетов: панель поиска, ленту новостей, а так же текстовые поля с авто-заполнением. Последний из перечисленных элементов стал настолько популярен, что для него появилось множество готовых решений на JavaScript.

До недавнего времени, в HTML не было соответствующего нативного аналога и каждый разработчик решал эту задачу по-разному. Сейчас в этом нет необходимости т.к. в HTML бал добавлен элемент datalist, который предназначен для упомянутой нами цели.

Знакомимся с элементом datalist

Элемент datalist представляет собой контейнер, в котором перечисляются варианты для авто-заполнения. Каждый вариант необходимо поместить в тег option. По умолчанию элемент datalist и всё его содержимое скрыто, так что на отображение страницы ничего не повлияет. Чтобы связать элемент datalist и другое текстовое поле, достаточно ко второму приписать атрибут list, указав id элемента-источника информации.

Простой пример:

<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). Далее связали элемент datalist и текстовое поле по id.

Удобство в том, что данный элемент отлично подходит для использования в сочетании с JavaScript. Например, вы можете делать AJAX запросы к серверу и сразу же подставлять список возможных вариантов.

Пример с динамической генерацией контента:

Итак, мы обсудили, как прикрутить авто-заполнение к текстовым полям, но на самом деле это ещё не всё.

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 не показывает предлагаемые цвета.

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.

Поддержка браузеров

Согласно CanIUse, элемент datalist отлично поддерживается браузерами для ПК: Firefox, Chrome, и Opera, и Internet Explorer 10+. Safari не поддерживает его, так что пользователям Mac немного не повезло.

Что касается мобильных браузеров, то данный элемент поддерживается в Firefox, Chrome, а так же в последней версии браузера Blackberry.

Для работы данного элемента в старых браузерах, можете воспользоваться либо Relevant Dropdowns либо jQuery плагином HTML5 datalist. Просьба учитывать, что данные плагины могут послужить заменой для авто-заполнения текстового поля, а вот для диапазона или выбора цвета, нет.