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