Bootstrap Typeahead + Knockout

HTML

<script src="https://raw.github.com/twitter/bootstrap/master/js/bootstrap-typeahead.js"></script>
<link rel="stylesheet" href="https://raw.github.com/twitter/bootstrap/master/docs/assets/css/bootstrap.css">
<script src="https://raw.github.com/SteveSanderson/knockout/v2.2.1/build/output/knockout-latest.debug.js"></script>
<p>Synchronous:</p>
<div data-bind='text: item'></div>

<input data-bind='typeahead: sync_source, value: item,  valueUpdate: "afterkeydown"' />
<hr/>
<p>Asynchronous:</p>
<div data-bind='text: item2'></div>

<input data-bind='value: item2, typeahead: async_source, valueUpdate: "afterkeydown"' />

CSS

div {
    background-color: #CC8;
    float: right;
    border: 1px dotted gray;
    margin-right: 60px;
    padding: 3px;
}

JavaScript

var model = {
    item: ko.observable(),
    item2: ko.observable(),
    sync_source: ["Alpha", "Beta"],
    async_source: function (query, process) {
        // mimic async
        setTimeout(function () {
            process(['Alpha2', 'Beta2']);
        }, 250);
    }
};

ko.bindingHandlers.typeahead = {
    init: function (element, valueAccessor) {
        var $e = $(element),
            source = valueAccessor();

        $e.typeahead({
            source: source,
            minLength: 0
        });
    },
    update: function (){
        alert("alo!");
    }
};

ko.applyBindings(model);