Twitter Bootstrap TypeAhead to work like DropDown List / Select Tag with Autocomplete Feature Twitter Bootstrap TypeAhead to work like DropDown List / Select Tag with Autocomplete Feature jquery jquery

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('');});});

http://jsfiddle.net/d4kris/5rtGA/3/


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/