Often times, one must give users the ability to both select from a predefined list and free form type into a text box as an answer to a question on an HTML form. In standard HTML,
there is the input text box which accepts any input. In addition, there is the Select box that allows one to pick from a predefined list of options. However, if you want both functionalities,
you must construct it yourself. This solution uses Twitter Bootstrap 4, HTML, and Javascript (JQuery too).
Shown below is an example. Note, click the blue button to display the dropdown list. Click an item in the list to select it.
Now of course there is no problem if your favorite color is Red, Green, or Blue (i.e. the predefined values in the list). But what if your favorite color is Pink? Well, that is not in the list so simply type it in and move on. No problem.
Shown below is an example. Note, click the blue button to display the dropdown list. Click an item in the list to select it.
Now of course there is no problem if your favorite color is Red, Green, or Blue (i.e. the predefined values in the list). But what if your favorite color is Pink? Well, that is not in the list so simply type it in and move on. No problem.
Here is the HTML
Here is the Javascript (JQuery too)
Here is the CSS
.combobox { overflow-y:scroll; max-height:400px; } .comboboxitem { background-color:#FFFFFF; cursor:pointer; height:1.75em; }