Html Select Drop-Down with an Input Field [Duplicate]

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.

2

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:

8
Maya Lin-Takahashi

Maya Lin-Takahashi

Consumer Tech & Gadget Reviewer

Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.

Share this article
Twitter Facebook Pinterest