combobox - How can I create an editable dropdownlist in HTML?

Question

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 1

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>