Как работает в html5 datalist?

От автора: всех приветствую. HTML5 принес нам много новых возможностей и одна из них – datalist. Как работает в html5 datalist? Давайте посмотрим.

Собственно, чтобы понять вообще суть того, о чем мы будем говорить, откройте прямо сейчас любой поисковик – Яндекс или Гугл, например. Введите туда любое слово или фразу. Например: “как заработать” и вы сразу же получите кучу поисковых подсказок в стиле “как заработать без вложений” и т.д. То есть поисковая машина выдает вам наиболее популярные запросы на основании того, что вы ввели.

Подобным образом функционирует и datalist в html5. Этот тег необходимо заполнить различными словами, которые будут предлагаться пользователю, когда он что-то вводит в поле ввода. При этом будет учитываться то, что именно вводит пользователь. Например, если он ввел “сан” то ему могут быть показаны такие слова, как “сантехник”, “Санкт-Петербург”, но ни в коем случае не Москва, потому что это явно не то, что ищет человек.

Как создать список слов?

Очень просто, смотрите этот код:

Обязательным при создании такого листа является указание идентификатора, потому что потом мы будем связывать поле ввода с листом значений именно с помощью идентификатора. Как видите, сам тег datalist является всего лишь контейнером для одинарных тегов option, в каждый такой тег записывается одно значение.

Конечно, нужно понимать, что в реальности никто не будет заполнять все слова вручную, тем более, если их более ста. Значения нужно брать из базы данных, ведь их может быть много миллионов.

Как связать список с полем ввода?

Наиболее логично предположить, что созданный нами список нужно будет связать с полем поиска. В таком случае запишем так:

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

Заметьте, что в нашем дата-листе всего 2 слова, поэтому если начать вводить в поле поиска что-то не на букву “а”, то наши слова даже не будут выведены в качестве подсказок. Это еще раз доказывает то, что вручную заполнять datalist попросту глупо, ведь чтобы сделать его более менее полезным для пользователей, туда нужно вписать хотя бы пару тысяч слов.

Комментарии Вконтакте: