將過濾器應用於observableArray？

Question

我正在研究一個項目，其中我有一個搜索字段，用於根據搜索框中鍵入的內容篩選observableArray。

這裏是我的html代碼：

   <input class="form-control" placeholder="Search for a burger joint around downtown Indianapolis, IN" data-bind="value: searchInput, valueUpdate: 'afterkeydown', event: { keyup: filterResults }"> 

這裏是我的js代碼：

var BurgerJoint = function(data) { 
    this.id = ko.observable(data.id); 
    this.name = ko.observable(data.name); 
    this.long = ko.observable(data.long); 
    this.lat = ko.observable(data.lat); 
    this.comments = ko.observable(data.comments); 
} 

var ViewModel = function() { 
    var self = this; 
    self.searchInput = ko.observable(''); 

    this.burgerList = ko.observableArray([]); 

    initialBurgerJoints.forEach(function(burgerItem){ 
     self.burgerList.push(new BurgerJoint(burgerItem));   
     addmarker(burgerItem.lat, burgerItem.long, burgerItem.id, burgerItem.name, burgerItem.comments); 
    }); 

    self.burgerList.sort(function (l, r) { return l.name() > r.name() ? 1 : -1 }); 

    self.currentFilter = ko.observable(); 

    self.filterResults = function(){ 
     var value = self.searchInput().toLowerCase(); 
     if(value != ''){ 
      self.burgerList(self.burgerList.filter(function(data){ 
       var startsWith = data.name.toLowerCase().startsWith(value); 
       return burgerList; 
      })); 
     } 
     return true; 
    }; 

    self.showmap = function(data) { 
     viewmarker(data.id()); 
    };  
} 

    ko.applyBindings(new ViewModel()); 

我在與filterResults功能問題

。有什麼建議麼？

Answer 1

也許你不應該將原來的burgerList設置爲過濾功能。首先製作原件的副本/克隆。嘗試類似

self.filterResults = function(){ 
     var value = self.searchInput().toLowerCase(); 
     if(value != ''){ 
      self.burgerList(self.burgerList().filter(function(data){ 
       return data.name.toLowerCase().startsWith(value); 
      })); 
     }else{ 
      // reset with the original burgerList contents here 
      self.burgerList(self.burgerListClone()); 
     } 
    };