Question

i have a an observable array in my model that is bind to just a list of div’s in the view, i want to create a textbox above that list which will filter out the users, like if i write: “admin” will only show users with name admin in them.

how do i do that in knockout? where should i keep the original list of users?
and how should i filter the observable array ?

my model looks like this:
the observable array is usersWithGroups

var groupsViewModelClass = function () {
var self = this;
ko.mapping.fromJS({
    assignedPermissions: [],
    avilablePermissions: [],
    usersWithGroups: [],
    allGroups: []
}, {}, self);
}

thanks

Answer 1

You can use ko.utils.arrayFilter function

Example:

//filter the items using the filter text
viewModel.filteredItems = ko.computed(function() {
    var filter = this.filter().toLowerCase();
    if (!filter) {
        return this.items();
    } else {
        return ko.utils.arrayFilter(this.items(), function(item) {
            return ko.utils.stringStartsWith(item.name().toLowerCase(), filter);
        });
    }
}, viewModel);

See also: http://www.knockmeout.net/2011/04/utility-functions-in-knockoutjs.html