• Главная»
  • Уроки»
  • HTML5»
  • Реализация полей с автозаполнением при помощи элемента datalist

Реализация полей с автозаполнением при помощи элемента 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. Просьба учитывать, что данные плагины могут послужить заменой для авто-заполнения текстового поля, а вот для диапазона или выбора цвета, нет.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.sitepoint.com/creating-autocomplete-datalist-controls/
Перевел: Станислав Протасевич
Урок создан: 22 Октября 2014
Просмотров: 12958
Правила перепечатки


5 последних уроков рубрики "HTML5"

  • Расширяем возможности HTML за счёт создания собственных тегов

    В этом уроке я покажу процесс создания собственных HTML тегов. Пользовательские теги решают множество задач: HTML документы становятся проще, а строк кода становится меньше.

  • Определение доступности атрибута HTML5 с помощью JavaScript

    Сегодня мы посмотрим, как можно организовать проверку доступности атрибута HTML5 с помощью JavaScript. Проверять будем работу элементов details и summary.

  • HTML5: API работы с вибрацией

    HTML5 - глоток свежего воздуха в современном вебе. Она повлиял не только на классический веб, каким мы знаем его сейчас. HTML5 предоставляет разработчикам ряд API для создания и улучшения сайтов с ориентацией на мобильные устройства. В этой статье мы рассмотрим API для работы с вибрацией.

  • Создание форм с помощью Webix Framework — 4 практических примера

    Веб дизайнеры частенько сталкиваются с необходимостью создания форм. Данная задача не простая, и может вызвать головную боль (особенно если вы делаете что-то не стандартное, к примеру, много-страничную форму). Для упрощения жизни можно воспользоваться фрэймворком. В этой статье я покажу вам несколько практических приёмов для создания форм с помощью фрэймворка Webix.

  • Знакомство с фрэймворком Webix

    В этой статье мы бы хотели познакомить вас с фрэймворком Webix. Для демонстрации возможностей данного инструмента мы создадим интерфейс online аудио плеера. Не обольщайтесь — это всего лишь модель интерфейса. Исходный код доступен в демо и на странице GitHub.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 24 Октября 2014 22:15
    Ygreec
    Хорошая штука. Вопрос: как увеличить высоту выпадающего списка? Чтобы например 10 строк или 15?
^ Наверх ^