Twitter Bootstrap TypeAhead to work like DropDown List / Select Tag with Autocomplete Feature
I just found this awesome plugin that turns a standard SELECT element into very seamless nicely styled combo box using bootstrap typeahead. It looks really good, I'm going to use it on my next project.
https://github.com/danielfarrell/bootstrap-combobox
Live Example (Bootstrap 3)
Tiny improvement to davidkonrads answer to keep the filter functionality when typing.
$(document).ready(function() {$("#test").typeahead({ "source": ['Pennsylvania', 'Connecticut', 'New York', 'Maryland', 'Virginia'], //match any item matcher: function(item) { if (this.query == '*') { return true; } else { return item.indexOf(this.query) >= 0; } }, //avoid highlightning of "*" highlighter: function(item) { return "<div>" + item + "</div>" }});// "select"-button$(".showAll").click(function(event) { var $input = $("#test"); //add something to ensure the menu will be shown $input.val('*'); $input.typeahead('lookup'); $input.val('');});});
That is indeed possible - even very simple - without changing the typeahead javascript / using altered code, IF you are willing not to show matched results highlighted.
HTML:
<input name="test" id="test"/><button id="emu-select" class="btn btn-small" type="button"><i class="icon-arrow-down"></i></button>
script:
$(document).ready(function() { $("#test").typeahead({ "source": ['Pennsylvania','Connecticut','New York','Maryland','Virginia'], //match any item matcher : function (item) { return true; }, //avoid highlightning of "a" highlighter: function (item) { return "<div>"+item+"</div>" } }); // "select"-button $("#emu-select").click(function(){ //add something to ensure the menu will be shown $("#test").val('a'); $("#test").typeahead('lookup'); $("#test").val(''); });});
working code / example at jsfiddle http://jsfiddle.net/davidkonrad/ZJMBE/3/