Создание комбинированного поля ввода: текст + выпадающий список

Быстрый ответ

Комбинация элемента <input> с типом текст и элемента <datalist> создаст выпадающий список с опцией ввода произвольного текста. Подсказки выдаются при помощи <datalist>, а ввод пользователя записывается через <input>.

<input type="text" list="options">
<datalist id="options">
  <option value="Вариант 1">
  <option value="Вариант 2">
  <option value="Вариант 3">
</datalist>

Пользователи могут выбрать из предложенных опций или внести свой ответ.

Для улучшения взаимодействия с элементами <input> и <datalist> можно добавить обработчики событий на JavaScript.

document.querySelector('input[list="options"]').addEventListener('change', (event) => {
  // Обработка событий на стороне клиента с помощью JavaScript
});

Оформление этого элемента при помощи CSS поможет сделать его визуально привлекательным и качественным.

Полная история

Регистрация пользовательского значения

Используйте скрытый <input> как верного помощника, который будет регистрировать и хранить значения при изменении <datalist>.

document.querySelector('input[list="options"]').addEventListener('change', (event) => {
  // Уведомление о выборе значения
  document.getElementById('selected-value').value = event.target.value;
});

Подробнее об этом расскажет наш спикер на видео

jQuery к вашим услугам

С помощью jQuery можно доработать интерфейс, реализовав автозаполнение:

$('[list=options]').on('input', function() {
  var val = this.value;
  if ($('#options option').filter(function() {
      return this.value === val;
  }).length) {
    // Реакция на выбор пользователя
  }
});

Редактируемый выпадающий список, подкрепленный дополнительными возможностями

Библиотеки вроде dhtmlgoodies предлагают готовые решения для динамического переключения между выпадающим списком и текстовым полем.

Визуализация

Давайте превратим наш элемент в многофункциональный инструмент:

- Когда не активен:      [🔪]
- Как выпадающий список:    [🔪] ⟶ 🍴🥄🍽
- Как текстовое поле:  [🔪] ⟶ ✏️

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

Руководство, которое вам нужно

Ориентир на пользователя

Управляйте фокусом элементов формы, что обеспечит простоту навигации для пользователей.

const inputField = document.querySelector('input[list="options"]');
const nextInput = document.getElementById('next-input');

inputField.addEventListener('change', () => {
  nextInput.focus(); // Перемещение фокуса
});

Кнопка сброса

Поддерживайте последовательность интерфейса, предотвратив зацикливание <select> при редактировании текста пользователем.

inputField.addEventListener('input', () => {
  if (inputField.value === '') {
    // Логика сброса выбора
  }
});

CSS как мастер стилизации

Придайте вашим элементам уникальный внешний вид при помощи CSS.

input[list='options'] {
  /* Оформление для поля с выбором */
}

input[list='options']:focus {
  /* Стилизация фокуса на элементе */
}

option {
  /* Оформление вариантов выбора */
}

Увеличение интерактивности

Реализуйте навигацию по элементам управления при помощи клавиатуры для улучшения взаимодействия с ними.

Полезные материалы

1. <select>: Элемент HTML Select – MDN Веб-документация — Подробное описание и примеры использования тега <select>.
2. <input>: Элемент ввода (форма ввода) – MDN Веб-документация — Руководство по использованию различных типов и атрибутов <input>.
3. Как создать выпадающее меню с помощью CSS и JavaScript – W3Schools — Инструкции по созданию выпадающего меню с использованием CSS и JavaScript.
4. Стандартная стилизация выпадающего меню | CSS-Tricks — Как настроить базовую стилизацию выпадающих списков при помощи CSS.
5. Группа ввода · Bootstrap — Подход Bootstrap к созданию настраиваемых выпадающих списков с расширенными возможностями.
6. Автозаполнение | jQuery UI — Пример реализации комбинированного списка с функцией автозаполнения на основе jQuery.