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.

Here is the HTML

  

        What Is Your Favorite Color?
        


            

            

            
                
            

            


                

                Red


                Green


                Blue


            
        
  

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;
}

In Your Form Submit Handler Script

The form variable you should handle in your form submit handler script is the hidden field named SAMPLE_COMBOBOX_VALUE (ID SAMPLE_COMBOBOX_VALUE).

During Page Load

If you are pre-populating the fields from a database, etc., then you will need to set the field with ID SAMPLE_COMBOBOX_VALUE with the actual data value. You will also need to set the field ID SAMPLE_COMBOBOX_DISPLAY_TEXT with the appropriate display value that corresponds to the actual data value.