2013-04-13 2 views
24

Как я могу реализовать выпадающее меню в стиле HTML с возможностью ввода текста?HTML-выпадающий список с полем ввода

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

+0

'поле поиска == ввода текста field' –

+0

@MohammadAdil Да, но вы знаете, что я имею в виду :) – jesal

ответ

54

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

<input type="text" name="city" list="cityname"> 
<datalist id="cityname"> 
    <option value="Boston"> 
    <option value="Cambridge"> 
</datalist> 

Это создает свободное текстовое поле ввода, которое также имеет раскрывающееся меню для выбора предопределенных вариантов. Attribution для примера и получения дополнительной информации: https://www.w3.org/wiki/HTML/Elements/datalist

+4

Привет Олег, оригинальный плакат просил либо плагин или какой-либо образец кода - может вы изложите свой ответ, чтобы показать, как применять атрибут «список», чтобы делать то, что они хотят? Спасибо. –

+4

woah. Теперь я только что узнал что-то новое. Я думаю, что не многие программисты знают этот простой трюк, чтобы решить проблему. Спасибо. – Dummy

+2

Datalist делает трюк, но отображение на некоторых браузерах (хром для ex) может стать проблематичным. Напротив, чтобы выбрать элемент, вы не можете создать стиль или даже просто иметь полосу прокрутки, которая является большой проблемой для длинных списков. –

Смежные вопросы