Создание полностью функционального и настраиваемого редактируемого комбобокса в JavaScript улучшает взаимодействие с пользователем, позволяя как выбирать из предопределенного списка, так и вводить новые значения. В этом руководстве рассматриваются два подхода: ручная реализация с использованием HTML, CSS и JavaScript, а также упрощенный подход с использованием библиотеки Select2.
Содержание
- Метод 1: Создание пользовательского редактируемого комбобокса
- Метод 2: Использование библиотеки Select2
- Улучшение редактируемого комбобокса
Метод 1: Создание пользовательского редактируемого комбобокса
Этот метод обеспечивает точный контроль и глубокое понимание базовых механизмов. Мы объединим поле ввода для набора текста и скрытый неупорядоченный список для отображения вариантов.
Сначала настроим структуру HTML:
<div class="combobox">
<input type="text" id="comboboxInput" placeholder="Выберите или введите...">
<ul id="comboboxList"></ul>
</div>
Затем добавим CSS для стилизации:
.combobox {
position: relative;
display: inline-block;
}
.combobox input {
width: 200px;
padding: 5px;
border: 1px solid #ccc;
}
.combobox ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
border: 1px solid #ccc;
background-color: white;
display: none; /* Скрыт по умолчанию */
}
.combobox li {
padding: 5px;
cursor: pointer;
}
.combobox li:hover {
background-color: #f0f0f0;
}
Наконец, JavaScript для обработки функциональности:
const input = document.getElementById('comboboxInput');
const list = document.getElementById('comboboxList');
let options = ['Вариант 1', 'Вариант 2', 'Вариант 3'];
input.addEventListener('input', () => {
list.innerHTML = '';
const filter = input.value.toLowerCase();
options.forEach(option => {
if (option.toLowerCase().includes(filter)) {
const item = document.createElement('li');
item.textContent = option;
item.addEventListener('click', () => {
input.value = option;
list.style.display = 'none';
});
list.appendChild(item);
}
});
list.style.display = input.value ? 'block' : 'none';
});
input.addEventListener('focus', () => {
list.style.display = 'block';
});
input.addEventListener('blur', () => {
setTimeout(() => {
list.style.display = 'none';
}, 100);
});
// Функциональность добавления нового варианта (пример)
input.addEventListener('keydown', (event) => {
if (event.key === 'Enter' && !options.includes(input.value)) {
options.push(input.value);
list.style.display = 'none';
input.value = ''; // очистить поле ввода после добавления
}
});
Метод 2: Использование библиотеки Select2
Select2 значительно упрощает процесс. Включите файлы CSS и JavaScript Select2 в свой проект (вы можете загрузить их с официального сайта Select2 или использовать CDN). Затем инициализируйте Select2 в вашем элементе select:
<select id="mySelect">
<option value="Option 1">Вариант 1</option>
<option value="Option 2">Вариант 2</option>
<option value="Option 3">Вариант 3</option>
</select>
<script>
$('#mySelect').select2({
tags: true, // Включает добавление новых вариантов
allowClear: true // Позволяет очистить выбор
});
</script>
Опция tags: true делает комбобокс редактируемым, позволяя пользователям добавлять новые варианты, отсутствующие в исходном списке. Опция allowClear: true предоставляет способ очистки выбора.
Улучшение редактируемого комбобокса
Независимо от выбранного метода, рассмотрите следующие улучшения:
- Сохранение: Сохраняйте варианты с помощью локального хранилища или базы данных на стороне сервера, чтобы сохранять их между сессиями.
- Валидация: Реализуйте проверку ввода, чтобы предотвратить недопустимые записи.
- Стилизация: Настройте внешний вид с помощью CSS, чтобы обеспечить бесшовную интеграцию с дизайном вашего приложения.
- Удаленные источники данных: Для больших наборов данных динамически извлекайте варианты с помощью AJAX-запросов.