Knockout-jQueryUI
Autocomplete.html
Autocomplete enables users to quickly find and select from a pre-populated list of values as they type, leveraging searching and filtering.
Parameters
For each of the widget's options the binding has a corresponding option with the same name. These can be set to static values, or bound either to normal or to observable properties of the viewmodel.
For each of the widget's events the binding has a corresponding option with the same name. These can be set to functions. When invoked the value of the this keyword evaluates to the viewmodel.
widget
Should be bound to one of the viewmodel's writeable observables. The binding will write a jQuery object containing the binding's DOM element into it. The primary use for this option is to invoke the widget's methods on the element.
Example
HTML
<label for="states">States:</label>
<input id="states" type="text" data-bind="autocomplete: { source: items, select: onSelect }">
<span>Selected:</span>
<span data-bind="text: selected"></span>JavaScript
var ViewModel = function () {
this.items = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California', 'Colorado',
'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawai\uFEFF\u02BBi', 'Idaho', 'Illinois',
'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland',
'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana',
'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York',
'North Carolina', 'North Dakota', 'Ohio', 'Oklahoma', 'Oregon', 'Puerto Rico',
'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee',
'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin',
'Wyoming'];
this.selected = ko.observable('');
};
ViewModel.prototype.onSelect = function(ev, ui) {
this.selected(ui.item.value);
};