"knockout and Typeahead"
Bootstrap 3.0.0 Snippet by CharlesStone

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css" rel="stylesheet" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/47003/knockout-2.3.0.js"></script>
<body>
<h1>Knockout and Typeahead</h1>
<section>
<!-- typeahead binding handler -->
<input type="text" data-bind="typeahead: movies, value: movie, items: 3"/>
<ul data-bind="foreach: movies">
<li data-bind="text:$data"></li>
</ul>
</section>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
ko.bindingHandlers.typeahead = {
init: function(element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
var $element = $(element);
var allBindings = allBindingsAccessor();
//var value = ko.utils.unwrapObservable(allBindings.value);
var source = ko.utils.unwrapObservable(valueAccessor());
var items = ko.utils.unwrapObservable(allBindings.items) || 4;
var valueChange = function(item){
//console.log('item = ' + item);
return item;
};
var highlighter = function(item){
var matchSpan = '<span style="color: blue;font-weight:bold">';
var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&');
return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
return matchSpan + match + '</span>';
});
};
var options = {
source : source,
items: items,
updater: valueChange
};
$element
.attr('autocomplete', 'off')
.typeahead(options);
}
};
var vm = (function () {
var Person = function (first, last) {
this.firstName = ko.observable(first);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: