Создание выпадающего списка автозаполнения с помощью элемента 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 имеет ошибки.

Заключение

Из этой статьи вы узнали, как использовать элемент <datalist> для создания собственных выпадающих списков автозаполнения. А также, как использовать AJAX для заполнения datalist из внешнего JSON-файла.
<datalist> является одним из нескольких новых элементов, которые поддерживают пользовательские реализации компонентов интерфейса. Сделав эти элементы простыми в использовании, разработчики браузеров избавляются от библиотек JavaScript.

Дайте знать, что вы думаете по этой теме статьи в комментариях. За комментарии, дизлайки, лайки, отклики, подписки огромное вам спасибо!