Многие годы для создания такой функции разработчики полагались на 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.
С другой стороны, когда мы дважды кликаем по полю ввода, оно отображает для нас все доступные опции, как показано ниже.
В Opera когда мы только переводим курсор на поле ввода, оно сразу отображает нам список доступных опций, а затем сортирует их на основе вводимых символов.
Firefox не будет показывать каких-либо опций до тех пор, пока вы не нажмете на поле ввода. Затем вам будут отображены опции, которые содержат значения, совпадающие с тем, что вводит пользователь. К примеру, этот скриншот демонстрирует нам, как Firefox предлагает нам опции, которые содержат символ «u».
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 это будет выглядеть следующим образом:
Далее мы создаем новый 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'.
И на этом все! Теперь вы можете посмотреть демо в действии, либо скачать исходные коды по ссылке, приведенной ниже.
Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.