bootstrap - dropdown with free text

Question

I need to display a dropdown list on an html page. I would like that the user could also add free text inside the combobox if he doesnt't find the value he wants. Is it possible and not too much complicated? I have bootstrap and jquery. Thanks!

Answer 1

With a datalist that is pretty easy - no CSS/JavaScript required.

Here is a Bootstrap example:

<form role="form">
   <div class="form-group">
      <input type="text" class="form-control" list="select-list-id"/>
   </div>
   <datalist id="select-list-id">
      <option value="What was your childhood nickname?"></option>
      <option value="In what city did you meet your spouse/significant other?"></option>
   </datalist>
</form>

See fiddle.

Answer 2

To get you started, here are two libraries that will help achieve what you want.

Select2 supports many features and allows the user to input text.

Another option is Selectize.js but I haven't tried it out myself.

Finally there is this project which also achieves your desired effect.