Question

I have a search form:

<form class="navbar-search pull-right" data-bind="submit: findBook">
    <input type="text" class="search-query" placeholder="Search" id="search-input"> 
    <i class="icon-search"></i>
    <input type="submit" value="Submit">
</form>

I’m listing the books here:

<ul id="container" class="list" data-bind="foreach: books">
    <li>
    <div>
    <table>
    <tr>
    <td class="center">
    <a data-bind="attr:{href: url}">            
       <img width="150" class="img-polaroid shadow" data-bind="attr:{src: image}">
    </a>
    </td>
    </tr>   
    <tr>
    <td class="center">
        <h6 data-bind="text: name"></h6>
    </td>
    </tr>
    </table>
    </div>
    </li>
</ul>

And a findBook method in my ViewModel:

    self.books = ko.computed(function() {
        return ko.utils.arrayFilter(library, function(book) { 
          return self.selectedCategory() == null ||
              book.category === self.selectedCategory(); 
          })
    });
    self.findBook = function() {
        self.books = ko.computed(function() {
            return ko.utils.arrayFilter(library, function(book) {
                return book.name.match(new RegExp($('#search-input').val(), 'i'));   
            });
        });
    };       
}

What am I missing?

Answer 1

Your findBook function is attempting to replace the books computed observable with a different one. Your view was already bound to the previous one so you’re not going to see any changes there.

You need to change your books computed observable to depend on some filter. If the filter is not set, include the item. If the filter is set, exclude it.

self.selectedCategory = ko.observable('');
self.nameFilter = ko.observable('');

self.books = ko.computed(function () {
    var selectedCategory = self.selectedCategory(),
        nameFilter = self.nameFilter(),
        selectedFilter = filter && new RegExp(filter, 'i');
    return ko.utils.arrayFilter(library, function (book) {
        var validCategory = !selectedCategory || book.category === selectedCategory,
            validFilter = !selectedFilter || book.name.match(selectedFilter);
        return validCategory && validFilter;
    });
});

self.searchInput = ko.observable();
self.findBook = function (element) {
    self.nameFilter(self.searchInput());
};

Demo