<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>
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);
this.lastName = ko.observable(last);
this.movie = ko.observable();
this.movie.subscribe(function(val){
console.log(val);
val && toastr.info(val);
})
};
var movie = ko.observable();
var data = ['Iron Man', 'Iron Man 2', 'Iron Man 3', 'Avengers',
'LOTR: The Fellowship of the Ring',
'LOTR: The Two Towers',
'LOTR: The Return of the Ring',
'Star Wars I: Phantom Menace',
'Star Wars II: Attack of the Clones',
'Star Wars III: Revenge of the Sith',
'Star Wars IV: A New Hope',
'Star Wars V: The Empire Strikes Back',
'Star Wars VI: Return of the Jedi',
'The Princess Bride',
'Thor',
'Captain America'
];
var movies = ko.observableArray(data);
var p1 = new Person('John', 'Papa');
var p2 = new Person('Colleen', 'Papa');
var p3 = new Person('Ella', 'Papa');
var people = ko.observableArray([p1, p2, p3]);
var vm = {
movies: movies,
movie:movie,
moviesJSON: ko.toJSON(movies, null, 0)
};
return vm;
})();
ko.applyBindings(vm);
