5120bee 5120bee - 3 months ago 9
HTML Question

HTML: Is there a way to allow the user to type in their input but also have a drop down select menu?

For example, I have

<label class="form">Menu</label>
<select id="selection" name="select" required>
<option value="" selected>--Select an Option--</option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
...
</select>


This would only give a a drop down menu when the user clicks on the input box with their mouse. But I want to give them the option to be able to type in the input box such as:

If the user types in
option1
it would direct them to the "Option 1" drop-down menu, etc. And if the user types in any other words that are not included in the drop-down list it would show "Invalid Input".

Answer

Yes there is! A text input with a list attribute:

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

EDIT: for the autocomplete, try Bootstrap Typeahead

Comments