select list options as a function

https://groups.google.com/d/topic/knockoutjs/bAkBp_OTa3k/discussion

by kougiland

HTML

<script src="https://github.com/jquery/jquery-tmpl/raw/master/jquery.tmpl.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.debug.js"></script>
Filter: <input data-bind="value: filter, valueUpdate: 'afterkeydown'" /> <hr/>

<select data-bind="options: filterCategoriesAsFunction(filter)"></select>

<select data-bind="options: filterCategoriesAsDependentObservable"></select>

JavaScript

var viewModel = {
    filter: ko.observable("t"),
    categories: ["one", "two", "three", "four", "five", "six", "seven"]
};

viewModel.filterCategoriesAsFunction = function(filter) {
    var filter = ko.utils.unwrapObservable(filter);
    return ko.utils.arrayFilter(this.categories, function(category) {
       return ko.utils.stringStartsWith(category, filter); 
    });
}.bind(viewModel);


viewModel.filterCategoriesAsDependentObservable = ko.dependentObservable(function() { 
    var filter = this.filter();
    return ko.utils.arrayFilter(this.categories, function(category) {
       return ko.utils.stringStartsWith(category, filter); 
    });
}, viewModel);


ko.applyBindings(viewModel);