JavaScript

Как добавить справочник к полю в JavaScript

Справочник к полю в JavaScript можно добавить двумя способами. Если пользователь должен выбрать значение строго из списка, используйте <select>. Если пользователь может выбрать подсказку, но также может ввести свой текст, используйте <input> вместе с <datalist>. JavaScript нужен, чтобы заполнить список из массива, API или локальных данных

Вариант 1: datalist для подсказок

datalist похож на автодополнение. Пользователь начинает вводить текст, браузер показывает подходящие варианты. Но это не строгий справочник: человек все равно может ввести значение, которого нет в списке. Это удобно для городов, тегов, профессий, названий клиентов, если вы не хотите жестко блокировать ручной ввод

<label for="city">Город</label>
<input id="city" name="city" list="city-list" autocomplete="off">
<datalist id="city-list"></datalist>

<script>
const cities = ["Казань", "Москва", "Санкт-Петербург", "Екатеринбург"];
const list = document.querySelector("#city-list");

cities.forEach((city) => {
  const option = document.createElement("option");
  option.value = city;
  list.append(option);
});
</script>

Здесь поле связано со справочником через атрибут list="city-list". Значение должно совпадать с id элемента <datalist>. Если id не совпадает, подсказки не появятся, хотя JavaScript-код может быть написан правильно

Вариант 2: select для строгого выбора

Если значение должно быть только из справочника, например статус заказа, тариф, роль пользователя или категория товара, лучше использовать <select>. Тогда пользователь не сможет ввести случайную строку

<label for="status">Статус</label>
<select id="status" name="status"></select>

<script>
const statuses = [
  { id: "new", title: "Новая заявка" },
  { id: "work", title: "В работе" },
  { id: "done", title: "Готово" }
];

const select = document.querySelector("#status");

statuses.forEach((status) => {
  const option = document.createElement("option");
  option.value = status.id;
  option.textContent = status.title;
  select.append(option);
});
</script>

В этом примере в форму уйдет new, work или done, а пользователь увидит понятные подписи. Такой подход удобен, когда у справочника есть внутренний код и человекочитаемое название

Как получить выбранное значение

Для input и select значение читается одинаково — через .value

const city = document.querySelector("#city").value;
const status = document.querySelector("#status").value;

Если используете datalist, не считайте значение автоматически валидным. Нужно отдельно проверить, есть ли введенный текст в массиве

const allowedCities = ["Казань", "Москва", "Санкт-Петербург"];
const value = document.querySelector("#city").value;

if (!allowedCities.includes(value)) {
  console.log("Пользователь ввел свой вариант");
}

Когда справочник приходит с сервера

В реальном проекте список часто загружается через API. Тогда схема такая: получить JSON, очистить старые варианты, добавить новые

async function loadStatuses() {
  const response = await fetch("/api/statuses");
  const statuses = await response.json();

  select.innerHTML = "";

  statuses.forEach((status) => {
    const option = document.createElement("option");
    option.value = status.id;
    option.textContent = status.title;
    select.append(option);
  });
}

Важно не вставлять непроверенный текст через HTML-строку, если данные приходят извне. textContent безопаснее для подписи, потому что браузер воспринимает значение как текст, а не как разметку

Частые ошибки

Первая ошибка — использовать datalist, когда нужен обязательный выбор из базы. Вторая — хранить в форме красивую подпись вместо стабильного id. Третья — забывать про пустой вариант, если поле необязательное. Четвертая — заполнять справочник до того, как элемент найден в DOM

Мини-задача: сделайте поле «Клиент» через datalist и поле «Статус заказа» через select. Для статуса отправляйте код, а не текстовую подпись. Так вы почувствуете разницу между подсказкой и строгим справочником

Что почитать дальше по JavaScript

Источники: MDN datalist, MDN select, MDN querySelector

Что почитать дальше по JavaScript

Если нужен общий маршрут по теме, откройте рубрику JavaScript. Для соседних задач пригодятся эти разборы:

0 комментариев

Старые

Новые Популярные