115

I have a requirement where I HAVE TO use bootstrap autocomplete dropdown, BUT user can have free form text in that dropdown if they wish. Before you think about TypeAhead, I could use Bootstrap TypeAhead textbox, but I need to have the dropdown becasue we want to give some default values as headstart options in case users dont know what to search for.

I am using this with MVC DropDownListFor as that creates a select control for us.

I found this article which does that for me.

https://github.com/danielfarrell/bootstrap-combobox/pull/20

All I had to do was take off the name from the select control and the control was letting me enter free form text. All good so far.

Now, I am using this in conjunction with Knockoutjs. I bind my options and selected value to the select control and then on row rendered of my template, I called (selector).combobox() which makes the select control a bootstrap comobobox and adds an input control and hides the select control in the scenes behind.

The problem now is when I try to get he values to post to server, since the value I put in input box is not a valid options from the options I gave to select control, it is always setting it to the first option by default. This is becasue, I set the binding of the selected value on select control and not on the input box which was created by bootstrap-combobox.js.

My question is how do I get the input box to data-bind to the same porperty as the the select control was bound to.

Any other options?? Let me know if you need more clarification or have questions. Please suggest.

Thanks.

Krishna Veeramachaneni
  • 2,131
  • 3
  • 18
  • 24
  • I found a solution for my situation. I used TypeAhead text box instead of Autocomplete comobox and showed the options dropdown by default when users focused on the control or hit down button too. That way, they know what they can look for which was my primary requirement. – Krishna Veeramachaneni Oct 15 '12 at 19:17

6 Answers6

255

Have a look at Select2 for Bootstrap. It should be able to do everything you need.

Another good option is Selectize.js. It feels a bit more native to Bootstrap.

Egon
  • 3,718
  • 3
  • 34
  • 48
Arnold Daniels
  • 16,516
  • 4
  • 53
  • 82
  • 27
    How did you use Select2 to allow text input that was not already included in the datasource? – compcentral Apr 30 '13 at 14:42
  • 4
    As @compcentral correctly mentioned, Select2 DOES NOT ALLOW you to input anything that is not in the option list. Using (auto) tagging feature to simulate this is cumbersome, as it doesn't accept text with spaces inside. – Stas Slabko Aug 14 '13 at 13:05
  • 1
    @compcentral why don't you use the remote data source method? – Clain Dsilva Mar 10 '15 at 17:56
  • 1
    Selectize.js not providing full sample code including html. Waste of time as you end up debugging their samples to find out why it doesn't work. – derloopkat Mar 02 '17 at 17:16
  • for selectize.js and bootstrap 4 I had to use css from https://github.com/const-se/selectize-bootstrap4-theme instead of the default css; then, when hitting backspace to clear the selection, sometimes the input field width was too small and the text was not visible when typing - I had to use this trick: https://github.com/selectize/selectize.js/issues/851#issuecomment-132348605 – xhafan Jul 13 '20 at 13:51
27

Does the basic HTML5 datalist work? It's clean and you don't have to play around with the messy third party code. W3SCHOOL tutorial

The MDN Documentation is very eloquent and features examples.

Félix Adriyel Gagnon-Grenier
  • 8,422
  • 10
  • 52
  • 65
Juto
  • 1,246
  • 1
  • 13
  • 24
  • 3
    The major problem with HTML 5 `datalist` is that it doesn't support any DOM events. So everytime you select a value, you have to tab out of the corresponding textbox – Pawan Dec 20 '13 at 08:36
  • @Pawan That is not true (anymore?). The input linked to the datalist fires change and inputs events, at least. Look [here](https://jsfiddle.net/erfb60mg/), both change and input events fire a console log. – Félix Adriyel Gagnon-Grenier Jul 09 '19 at 21:24
  • Is this what you meant? `tab out`: (computing, graphical user interface) To press the Tab key and a modifier key to move between tabs or windows. – carloswm85 Jun 09 '22 at 22:08
3

Select2 for Bootstrap 3 native plugin

https://fk.github.io/select2-bootstrap-css/index.html

this plugin uses select2 jquery plugin

nuget

PM> Install-Package Select2-Bootstrap

Mahesh
  • 2,731
  • 2
  • 32
  • 31
1

Fuel UX combobox has all the features you would expect.

Stas Slabko
  • 506
  • 5
  • 14
1

Can i suggest http://www.jqueryscript.net/form/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest.html, works more like the twitter post suggestion where it gives you a list of users or topics based on @ or # tags,

view demo here: http://www.jqueryscript.net/demo/Twitter-Like-Mentions-Auto-Suggesting-Plugin-with-jQuery-Bootstrap-Suggest/

in this one you can easily change the @ and # to anything you want

0

Bootstrap Tokenfield seems good too: http://sliptree.github.io/bootstrap-tokenfield/

Spaceploit
  • 327
  • 3
  • 12