Does anybody know a twitter bootstrap compatible combobox/autosuggest control?

I am in need of a bootstrap compatible dropdown/autocomplete control that I can attach to a text field and opens prefilled with options when i put the cursor inside the textbox. At the bottom there should be an option to add a new item by t.ex. open a modal dialog on click. The user should also be able to enter his own text like with a combobox. This is functionality I have seen many websites use and it works very nicely.

More specifically my usecase is to fill out a invoice and to allow a user add a new product by clicking the "add new" link at the bottom. A modal popup will then open allowing the user to add details. When the modal closes and the product is saved for later the invoice line will then have Description, Price and Vat set. Also if the user selects one of the prefilled lines the product will be set for him. In case it is a one off product the user just enters the description and add price and vat manually.

The closest I have seen is select2 but it does not seem to do quite what I want. A kind of combo between the multiple and single functionality in select2 would be perfect. Also I am using angularjs as the client library

Combo/dropdown

Angular-UI has a combobox based on Select2: Angular-UI

I found Chosen (http://harvesthq.github.com/chosen/) to be a very good for these situations. I have been using it with bootstrap on a new project with no major issues.

enter image description here

Of course the menu items could be populated dynamically.

<!DOCTYPE html>
<head>
<title>Combobox Test</title>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
<script language="javascript" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js"></script>

<style>
body{
    padding:20px;
}
.dropdown-menu>li{
    cursor:pointer;
}
.dropdown-menu {
    padding-left:2px;
    right: auto;
    top:23px
}
.combobox-item{
    color:#aaa;
}
.combobox-item:hover{
    color:#000;
}
</style>

<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $(".combobox-item").unbind("click").click( function(e){
        var input = $(e.target).parents('li').children('input.combobox');
        if (e.target.className.indexOf("combobox-empty") == -1)
            $(input).val(e.target.innerHTML.trim()).attr("placeholder", "enter something").focus();
        else
            $(input).val("").attr("placeholder", "what other?").focus();
    });
});

</script>

</head>
<body>

<ul class="nav">
    <li class="dropdown">
        <input type="text" class="combobox" placeholder="enter something" class="dropdown-toggle" data-toggle="dropdown">
        <ul class="dropdown-menu" role="menu" id="dropdown-menu">
            <li class="combobox-item combobox-empty">Other</li>
            <li class="divider"></li>
            <li class="combobox-item">Foo</li>
            <li class="combobox-item">Bar</li>
        </ul>
    </li>
</ul>

</body>
</html>