Создание выпадающего списка автозаполнения с помощью элемента Datalist
Элемент <datalist> - новое дополнение спецификации HTML5. Он позволяет создавать собственные выпадающие списки автозаполнения. Этот элемент используется в полях форм, поскольку он помогает пользователям быстрее вводить данные. Ранее выпадающие списки автозаполнения могли быть реализованы только с помощью JavaScript.
Из этой статьи вы узнаете, как использовать элемент <datalist> для создания собственных выпадающих списков автозаполнения.
Элемент <datalist>
Выпадающий список для автозаполнения каталогов в Google Chrome.
Элемент <datalist> используется для указания всех возможных значений списка. Каждое из них определяется с помощью элемента <option>.
<datalist id="languages">
<option value="HTML">
<option value="CSS">
<option value="JavaScript">
<option value="Java">
<option value="Ruby">
<option value="PHP">
<option value="Go">
<option value="Erlang">
<option value="Python">
<option value="C">
<option value="C#">
<option value="C++">
</datalist>
Элемент <datalist> должен иметь атрибут id. Чтобы связать datalist с <input>, нужно указать атрибут list в поле ввода и установить для него значение id элемента datalist.
<input type="text" list="languages">Это все, что нужно, чтобы добавить функции автозаполнения к элементу <input>. Браузер позаботится о поиске вариантов datalist для сопоставления значений и их последующего отображения.
Загрузка вариантов через AJAX
Выпадающий список автозаполнения с вариантами, загружаемыми с помощью AJAX.
Если нужно добавить в элемент <datalist> большое количество вариантов, можно сохранить эти значения во внешнем JSON- файле. Затем получить этот файл с помощью AJAX, и заполнить варианты <datalist> после загрузки страницы. Давайте рассмотрим пример реализации.
Начинаем с элементов <input> и <datalist>. Убедитесь, что вы связали их с помощью атрибутов id и list.
<input type="text" id="ajax" list="json-datalist" placeholder="e.g. datalist">
<datalist id="json-datalist"></datalist>
Затем нужно получить ссылки на эти два элемента в JavaScript- коде.
// Получаем элементы <datalist> и <input>.
vardataList = document.getElementById('json-datalist');
var input = document.getElementById('ajax');
После этого загрузить JSON-файл (html-elements.json) и заполнить варианты для элемента <datalist>. В этом примере мы используем массив строк. Но также можно использовать и более сложную структуру данных.
// Создаем новый XMLHttpRequest.
var request = new XMLHttpRequest();
// Обрабатываем изменение состояния для запроса.
request.onreadystatechange = function(response) {
if (request.readyState === 4) {
if (request.status === 200) {
// Парсируем JSON
varjsonOptions = JSON.parse(request.responseText);
// Перебираем через цикл массив JSON.
jsonOptions.forEach(function(item) {
// Создаем новый элемент <option>.
var option = document.createElement('option');
// Устанавливаем значение, используя элементы массива JSON.
option.value = item;
// Добавляем элемент <option> к <datalist>.
dataList.appendChild(option);
});
// Обновляем текст заполнителя.
input.placeholder = "e.g. datalist";
} else {
// Возникла ошибка :(
input.placeholder = "Couldn'tload datalist options :(";
}
}
};
// Обновляем текст заполнителя.
input.placeholder = "Loading options...";
// Настраиваем и выполняем запрос.
request.open('GET', 'html-elements.json', true);
request.send();
Приведенный выше код загружает файл html-elements.json с помощью XMLHttpRequest. После того, как файл извлечен, мы парсим необработанные данные JSON, чтобы получить массив JavaScript. Затем перебираем через цикл элементы массива. Каждый раз, когда мы создаем новый элемент <option>, устанавливается атрибут value для текущего элемента в массиве. После чего добавляем <option> в <datalist>.
В следующем примере используется свойство placeholder для элемента <input>, чтобы отобразить статус загрузки параметров элемента datalist.
Демо-версияCodePen
Поддержка браузерами
Safari - это единственный современный браузер, который не поддерживает <datalist>. Стоит отметить, что реализация этого элемента в IE10 имеет ошибки.
| IE | Firefox | Chrome | Safari | Opera |
| 10.0+ | 4.0+ | 20.0+ | – | 9.0+ |
Заключение
Из этой статьи вы узнали, как использовать элемент <datalist> для создания собственных выпадающих списков автозаполнения. А также, как использовать AJAX для заполнения datalist из внешнего JSON-файла.
<datalist> является одним из нескольких новых элементов, которые поддерживают пользовательские реализации компонентов интерфейса. Сделав эти элементы простыми в использовании, разработчики браузеров избавляются от библиотек JavaScript.