Adding a dropdown button to Twitter bootstrap typeahead component

Question

Twitter bootstrap comes with a very handy auto-complete like component called typeahead. I am trying to add a small dropdown button (or widget) such that when pressed the typeahead component would act like a normal dropdown selector showing all of the available data-source bound options (in addition to its native autocomplete ability). The current markup is something like the following:

<input type="text" 
       data-provide="typeahead"
       data-items=5
       data-source='["option 1","option 2","option 3"]'>

So in effect what's needed is for the component to behave as a hybrid of a dropdown and autocomplete widgets. Anybody has done this before? thanks...

Answer 1

I have found this excellent componnet:

Source code
Live example

One thing though, the drop-down button's background looks funny on rollover. The fix involves a small change in "bootstrap-combobox.css":

...
.combobox-container .add-on {
    float: left;
    display: block;
    width: auto;
    min-width: 16px;
    height: 18px;
    margin-right: -1px;
    padding: 4px 5px;
    font-weight: normal;
    line-height: 18px;
    color: #999999;
    text-align: center;
    text-shadow: 0 1px 0 #ffffff;
    /*   background-color: #f5f5f5; */ // <<------------ comment this line
    border: 1px solid #ccc;
    -webkit-border-radius: 3px 0 0 3px;
    -moz-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}
...

Answer 2

Fuel UX as well provides a Combobox based on Bootstrap.