Here's a rather hacky script I wrote to bind fields marked up with Bootstrap's Typeahead plugin (see https://gist.github.com/1866577 for the version I use) to Knockout.js observables. Feedback is very welcome.
// Bootstrap.Typeahead binding: presently requires custom version from gist: https://gist.github.com/1866577. // Use like so: data-bind="typeahead: { target: selectedNamespace, source: namespaces }" ko.bindingHandlers.typeahead = { init: function(element, valueAccessor) { var binding = this; var elem = $(element); var value = valueAccessor(); // Setup Bootstrap Typeahead for this element. elem.typeahead( { source: function() { return ko.utils.unwrapObservable(value.source); }, onselect: function(val) { value.target(val); } }); // Set the value of the target when the field is blurred. elem.blur(function() { value.target(elem.val()); }); }, update: function(element, valueAccessor) { var elem = $(element); var value = valueAccessor(); elem.val(value.target()); } };
Update: Binding now uses only the valueAccessor, rather than looking for a separate 'source' binding. This is cleaner.