—»     —»   Знакомство с HTML5: Datalist
  Раздел: Формы   Комментариев: 1  

Знакомство с HTML5: Datalist

Вероятно, вы часто сталкиваетесь с подобным интерфейсом в интернете – вы начинаете вводить какие-то данные в форму ввода, и перед вами открывается выпадающий список рекомендаций.

Знакомство с HTML5: Datalist

Многие годы для создания такой функции разработчики полагались на javascript. Сегодня же у нас есть возможность воспользоваться HTML5-элементом 'datalist'. Этот новый HTML5-элемент позволяет нам хранить список опций, которые будут отображаться по мере того, как пользователь будет вводить что-нибудь в форму.

HTML5-атрибут List

'datalist' можно привязать к элементу 'input' при помощи нового HTML5-элемента – list. Мы можем использовать list в некоторых типах формы ввода – например, для строки поиска или поля ввода текста. Но, руководствуясь информацией от Mozilla Developer Network, атрибут List не поддерживается следующими формами ввода: hidden, checkbox, radio, file и button.

В следующем примере мы добавим список городов при помощи 'datalist' и привяжем его к атрибуту ID следующим образом:

<datalist id="city">
<option value="Adelaide">
<option value="Bandung">
<option value="Bangkok">
<option value="Beijing">
<option value="Hanoi">
<option value="Ho Chi Minh City">
<option value="Hong Kong">
<option value="Jakarta">
<option value="Kuala Lumpur">
<option value="Osaka">
<option value="Seoul">
<option value="Shanghai">
<option value="Singapore">
<option value="Surabaya">
<option value="Sydney">
<option value="Tokyo">
</datalist>

Чтобы привязать 'datalist' к элементу 'input', мы просто добавляем атрибут list и ссылаемся на атрибут id следующим образом:

<input class="destination-list" type="text" placeholder="From:" list="city">
<input class="destination-list" type="text" placeholder="To:" list="city">

Образ действий в браузере

Все браузеры, которые поддерживают элемент 'datalist' – Chrome, Opera и Firefox – действуют немного по-разному.

В Chrome опции отображаются, начиная от начала значения, которое пользователь вводит. В нижеприведенном примере Chrome отображает значения, которые начинаются с S.

Знакомство с HTML5: Datalist

С другой стороны, когда мы дважды кликаем по полю ввода, оно отображает для нас все доступные опции, как показано ниже.

Знакомство с HTML5: Datalist

В Opera когда мы только переводим курсор на поле ввода, оно сразу отображает нам список доступных опций, а затем сортирует их на основе вводимых символов.

Знакомство с HTML5: Datalist

Firefox не будет показывать каких-либо опций до тех пор, пока вы не нажмете на поле ввода. Затем вам будут отображены опции, которые содержат значения, совпадающие с тем, что вводит пользователь. К примеру, этот скриншот демонстрирует нам, как Firefox предлагает нам опции, которые содержат символ «u».

Знакомство с HTML5: Datalist

Safari же на данный момент не поддерживает элемент 'datalist', а IE поддерживает только начиная от 10 версии.

Используем HTML5 Datalist с polyfills

Существует несколько polyfills, которые позволяют нам имитировать подобный функционал в браузерах, в которых отсутствует поддержка. В нашей сегодняшней статье мы реализуем datalist polyfills от Michael Taylor. Чтобы воспользоваться ими, нам понадобится jQuery и Modernizr для определения и оценки способностей используемого браузера.

Что касается Modernizr, то здесь нам нужно внести некоторые корректировки. На странице скачивания Modernizr вам нужно будет отметить следующие опции.

* Input Attributes в разделе HTML5
* Modernizr.addTest в разделе Extensibility
* Modernizr.load в разделе Extra
* elem-datalist в разделе Non-core

Теперь, давайте откроем HTML-элемент, в головную секцию которого добавим элемент 'datalist' и библиотеку Modernizr, которую мы только что скачали.

<script src="js/modernizr.js" type="text/javascript"></script>

После того как мы добавили Modernizr, мы можем протестировать, поддерживает ли браузер элемент 'datalist'. Сделать это можно при помощи кода, приведенного ниже.

if (!Modernizr.datalistelem) {
alert('This browser does not support HTML5 datalist element, so we will load the polyfills');
}

Вышеприведенный код покажет нам оповещение «This browser does not support HTML5 datalist element, so we will load the polyfills» («Ваш браузер не поддерживает HTML5-элемент datalist, поэтому мы воспользуемся polyfills), если элемент datalist не поддерживается. Например, в браузере Safari это будет выглядеть следующим образом:

Знакомство с HTML5: Datalist

Далее мы создаем новый js-файл с названием load.datalist.js, и добавляем эту строку в документ. Это поможет определить и запустить скрипт, чтобы применить его к полю ввода, отмеченному атрибутом list.

$('input[list]').datalist();

Наконец, мы подгружаем jQuery, jquery.datalist.js и load.datalist.js используя Modernizr.load, следующим образом:

Modernizr.load({
test: Modernizr.datalistelem,
nope: ['js/jquery.js', 'js/jquery.datalist.js', 'js/load.datalist.js']
});

Это означает, что они будут загружаться только тогда, когда браузер поддерживает элемент 'datalist'.

Знакомство с HTML5: Datalist

И на этом все! Теперь вы можете посмотреть демо в действии, либо скачать исходные коды по ссылке, приведенной ниже.

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: HTML 5, отправные формы
Опубликовал Design FactoRy   Прочитано (раз): 11002   |   Оставлено комментариев: 1
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 18 марта 2013 @ 20:04
Написал: mrnobody — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
В предпоследнем абзаце у вас сказано:
"Это означает, что они будут загружаться только тогда, когда браузер поддерживает элемент 'datalist'."
Мы же скрипты должны подгружать, когда браузер не поддерживает данный элемент, а у вас в сказано наоборот.
Правильно будет написать "НЕ поддерживает":
"Это означает, что они будут загружаться только тогда, когда браузер не поддерживает элемент 'datalist'."
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц February по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031