使用Knockout創建實時搜索

我有一個使用Knockout創建實時搜索的項目。我找到了一個關於如何做的教程，但是當我在代碼中實現它時，它不起作用。搜索應該在數組上完成，並顯示數組中與用戶輸入的術語匹配的項目。最終產品應該是這樣的 image 使用Knockout創建實時搜索

https://github.com/silvodesigns/Neighborhood-Map tutorial-- opensoul.org/2011/06/23/live-search-with-knockoutjs/

來源

2016-01-04 Kevin Silvesttre

您可以使用ko.computed和textInput結合始終通知更改並應用過濾器。

請參閱snnipet。

function ViewModel(){ 
 
    var self =this; 
 
    this.filter = ko.observable(); 
 
    
 
    this.places = ko.observableArray([{name:"New York"},{name:"Los Angeles"},{name:"Curitiba"},{name:"Rio de Janeiro"}]); 
 
    
 
    
 
    this.visiblePlaces = ko.computed(function(){ 
 
     return this.places().filter(function(place){ 
 
      if(!self.filter() || place.name.toLowerCase().indexOf(self.filter().toLowerCase()) !== -1) 
 
      return place; 
 
     }); 
 
    },this); 
 
    
 
    
 
} 
 

 
ko.applyBindings(new ViewModel());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 

 
<label for="filter">Filter:</label> 
 
<input id="filter" type="text" data-bind="textInput: filter"/> 
 

 
<ul data-bind="foreach: visiblePlaces"> 
 
    <li data-bind="text: name"></li> 
 
</ul>

來源

2016-01-04 04:05:25

使用Knockout創建實時搜索

回答

相關問題