HTML select drop-down with an input field [duplicate]

49
votes

How can I implement a select-style drop down menu in HTML with an option that is a text input?

The idea being that someone can either select from a list of predefined options, or input their own option.

1
javascriptjqueryhtml
search field == input text field - Mohammad Adil
@MohammadAdil Yeah but you know what I mean :) - jesal

1 Answers

120
votes

You can use input text with "list" attribute, which refers to the datalist of values.

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

This creates a free text input field that also has a drop-down to select predefined choices. Attribution for example and more information: https://www.w3.org/wiki/HTML/Elements/datalist