Recently, I had a need for a select list that could also act as a text box for input. Back in my ASP.Net WinForms days, we had such a component called the combobox. The combobox allowed a user to either select from a list of items in the drop down list, or to enter a new one in the text field.
<label>Choose a browser from this list: <input list="browsers" name="myBrowser" /></label> <datalist id="browsers"> <option value="Chrome"> <option value="Firefox"> <option value="Internet Explorer"> <option value="Opera"> <option value="Safari"> </datalist>
The input is associated with the datalist by the "list" attribute and the datalist's id value. In the browser, the element looks like a select list but if you just click the text field area, it acts as text input. I think the original intention of this element is to provide filtering on a list, but it can also be used like the old combobox from WinForms, allowing the user to enter a value that doesn't exist in the list already.
I have found the behavior of the list to be a bit funky in Chrome. Sometimes, when clicking the down arrow to open the list, nothing will happen, but other than that occasional funkiness, this seems to work well and I plan to try and use it in my latest project.