Как создать ComboBox в HTML?
Укороченная версия
Как я могу создать ComboBox в HTML?
Длинная версия
Как создать редактируемый раскрывающийся список с текстом по умолчанию в HTML?
То есть:
- текстовое поле, которое пользователь может ввести
- или они могут нажать (или Alt+Down), чтобы отобразить раскрывающийся список.
- и выберите заранее определенный текст
- в то время как текстовое поле по умолчанию имеет какое-то полезное значение по умолчанию, которое (обязательно) не отображается в списке
Что-то вроде стандартного элемента управления Windows Combo Box или WinForms ComboBox:
Исследовательская работа
Я попробовал следующий HTML:
<input id = "edPhrase" list = "phrases" value = "Hello, world!">
<datalist id = "phrases">
<option value = "Good morning Vietnam">Good morning Vietnam</option>
<option value = "Stay classy San Francisco">Stay classy San Francisco</option>
<option value = "Cleaveland Rocks">Cleaveland Rocks</option>
<option value = "I see dead people">I see dead people</option>
<option value = "Guess who's drunk">Guess who's drunk</option>
</datalist>но раскрывающийся список не появляется:
Если пользователь удалит существующий текст, появится раскрывающийся список:
Таким образом, разрушается вся цель раскрывающегося списка.
Какие существа нам на вопрос:
Как я могу создать ComboBox в HTML?
Полный минимально воспроизводимый пример (CRME)
Итак, вы можете попробовать поэкспериментировать с ним, чтобы он работал в вашей песочнице:
- jsFiddle: 7t1zgqo6
@ Roadman1991 Почти; за исключением того, что нет текста по умолчанию.
Список данных предназначен для автозаполнения, по умолчанию он не отображает все параметры.
@0stone0 Это означает, что мои исследовательские усилия с использованием входных данных и списка данных ни к чему не приведут. Это возвращает меня к моему вопросу: как создать ComboBox в HTML.
Для автозаполнения потребуется некоторый JS, есть несколько инструментов, которые предоставляют такие поля. Если вам не нужны внешние библиотеки, используйте select с пользовательским JS, чтобы включить автозаполнение.
@0stone0 Кажется, ответ такой: «Вы не можете сделать это в HTML». Это нормально. Это может быть ответом. Если HTML просто не может воспроизвести один из наиболее часто используемых виджетов пользовательского интерфейса за последние 34 года: так оно и есть. Напишите это в форме ответа и он будет принят.
Ответы 2
Вам нужен JavaScript, чтобы удалить фокус ИЛИ и выбрать, и они смогут начать печатать, что откроет раскрывающийся список для того, что они печатают, при условии, что введенная буква появляется в списке данных.
document.getElementById('edPhrase').addEventListener('click', (e) => {
const input = e.target;
input.value = "";
});
/* Perhaps not
document.getElementById('edPhrase').addEventListener('blur', (e) => {
const input = e.target;
if (input.value.trim() === "") input.value=input.defaultValue;
});
*/
document.getElementById('edPhrase').addEventListener('change', (e) => {
const input = e.target;
if (input.value.trim() !== "") input.defaultValue=input.value;
});<input id = "edPhrase" list = "phrases" value = "Hello, world!">
<datalist id = "phrases">
<option value = "Good morning Vietnam">Good morning Vietnam</option>
<option value = "Stay classy San Francisco">Stay classy San Francisco</option>
<option value = "Cleaveland Rocks">Cleaveland Rocks</option>
<option value = "I see dead people">I see dead people</option>
<option value = "Guess who's drunk">Guess who's drunk</option>
</datalist>document.getElementById('edPhrase').addEventListener('click', (e) => {
const input = e.target;
input.focus();
input.select();
})<input id = "edPhrase" list = "phrases" value = "Hello, world!">
<datalist id = "phrases">
<option value = "Good morning Vietnam">Good morning Vietnam</option>
<option value = "Stay classy San Francisco">Stay classy San Francisco</option>
<option value = "Cleaveland Rocks">Cleaveland Rocks</option>
<option value = "I see dead people">I see dead people</option>
<option value = "Guess who's drunk">Guess who's drunk</option>
</datalist>Альтернативно ищите виджеты
Раскрывающийся список не появляется (jsfiddle.net/1e8v3tgk)
Это происходит, как только вы вводите букву, которая появляется в списке данных.
Но он не появляется, когда пользователь нажимает раскрывающийся список ▼; в этом вся суть. Пересмотренный фрагмент удаляет текст, когда пользователь щелкает раскрывающийся список.
Смотрите обновление. Вы можете очистить поле и восстановить его
Не существует собственного HTML-способа добиться этого, вам понадобится специальный Javascript, чтобы <datalist> отображал все параметры, или реализовать автозаполнение в <select>.
Использование placeholder на <input> гарантирует, что все параметры будут показаны внутри <datalist>, это сохранит фильтр при вводе функций, но вы не сможете «выбрать» заполнитель.
<input type = "text" list = "cars" placeholder = "Choose..." />
<datalist id = "cars">
<option>Volvo</option>
<option>Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</datalist>Есть несколько приемов, позволяющих datalist всегда показывать все доступные входные данные, используя (например) события blur(), если placeholder недостаточно:
так? jsfiddle.net/nwH8A