CODEWITHSUNDEEP
searchknockout.js
rhythmedium
rhythmedium

Reputation: 23

Knockout.JS computed observable live search

I am working on a live search feature for a knockout.js proof of concept. The ko.computed array doesn't return anything when I believe it should. Any help is definitely appreciated. Here is a jsfiddle: jsFiddle

self = this;
self.query = ko.observable('benefits');
self.samplesharepoint = [
    { title: "benefits", url: "www.benefits.com", sites: "branchburg, branford", topics: "benefits", tagged: "false" },
    { title: "health", url: "www.health.com", sites: "indy, laval", topics: "health", tagged: "false"},
    { title: "benefits", url: "www.benefits.com", sites: "ponce, genentech", topics: "benefits", tagged: "false"}
    ];
debugger;
self.pageLinks = ko.observableArray(self.samplesharepoint);
self.computedPageLinks = ko.computed(function() {
    return ko.utils.arrayFilter(self.pageLinks, function(item) {
        return item.title.toLowerCase().indexOf(self.query.toLowerCase()) >= 0;
    });
});

Upvotes: 1

Views: 1682

Answers (1)

nemesv
nemesv

Reputation: 139788

You have the typical knockout mistake: because self.pageLinks and self.query are observables - which are functions - you need to call them without any arguments to get their values.

So change your computed to:

self.computedPageLinks = ko.computed(function() {
    return ko.utils.arrayFilter(self.pageLinks(), function(item) {
        return item.title.toLowerCase().indexOf(self.query().toLowerCase()) >= 0;
    });
});

Note the () after self.pageLinks() and self.query()

Demo JSFiddle.

You can read more about observables and computeds in the documentation.

Upvotes: 3

Related Questions