Creating an editable combobox in HTML5
Recently while reading the HTML5 specification I found out a new cool feature called datalist element
Which basically allows you to create an editable select form element by providing a list of possible values to an input whilst also allowing for new values to be provided (think of it as a basic auto-complete field)
Below is an example of how to implement this :
1 2 3 4 5 6 7 |
<label for="color" i18n="">Select a color : </label><input list="colors" class="form-control" name="color" id="color" autocomplete="off"><datalist id="colors"> <option value="red"> </option> <option value="green"> </option> <option value="blue"> </option></datalist> |
Note that this is also compatible with Bootstrap 4 and 3
