How can I create an editable dropdownlist in HTML?

html combobox html-select
Łukasz Bownik picture Łukasz Bownik · Nov 5, 2008 · Viewed 179k times · Source

I'd like to create a text field with a dropdown list that lets the user choose some predefined values. The user should also be able to type a new value or select a predefined one from a dropdown list. I know that I can use two widgets for that but in my app it would be more ergonomnic if it was unified in a one widget.

Is there a standard widget or do I have to use a third party javascript?

How about browser portability?

Answer

Alexandru Boerescu picture Alexandru Boerescu · Jul 15, 2013

You can accomplish this by using the <datalist> tag in HTML5.

<input type="text" name="product" list="productName"/>
    <datalist id="productName">
        <option value="Pen">Pen</option>
        <option value="Pencil">Pencil</option>
        <option value="Paper">Paper</option>
    </datalist>

If you double click on the input text in the browser a list with the defined option will appear.

Related questions

How do I style a <select> dropdown with only CSS?

Is there a CSS-only way to style a <select> dropdown? I need to style a <select> form as much as humanly possible, without any JavaScript. What are the properties I can use to do so in …

Read More
How to pass parameters on onChange of html select

I am a novice at JavaScript and jQuery. I want to show one combobox-A, which is an HTML <select> with its selected id and contents at the other place on onChange(). How can I pass the complete combobox …

Read More
How to get multiple selected values of select box in php?

I have a html form which has a select list box from which you can select multiple values because its multiple property is set to multiple. Consider form method is 'GET'. The html code for the form is as follows: …

Read More