将我的搜索过滤器链接到列表项：knockout js

我需要帮助链接我的ul和li来自动过滤搜索。我不知道该从哪里走。将我的搜索过滤器链接到列表项：knockout js

self.filterMarkers = function() { 
    console.log(self.searchQuery); 
    var searchInput = self.searchQuery().toLowerCase(); 

    self.visiblePlaces.removeAll(); 

    self.allPlaces.forEach(function(place) { 
    console.log(place); 
    place.marker.setVisible(false); 

    if (placeName.toLowerCase().indexOf(searchInput) !== -1) { 
     self.visiblePlaces.push(place); 
    }; 
    }); 

    self.visiblePlaces().forEach(function(place) { 
    console.log(place); 
    place.marker.setVisible(true); 
    }); 
};

，我需要为我的名单和标记，当我在搜索输入类型来更新。帮帮我？

来源

2015-12-02 ryanwaite28

请阅读：stackoverflow.com/help/mcve和更好地解释你想做的事。 “当我输入搜索输入时，我需要更新列表和标记。”那个清单在哪里？什么是标记？ serach输入在哪里？这个问题意味着什么？ – JotaBe

您可能想要为您的过滤结果使用计算：http://knockoutjs.com/documentation/computedObservables.html –

也许如果你使用ko.computed(callback,this)，我编写了一个例子来向你展示其中一种可能的方法，我希望能有用X）。

请参阅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>

来源

2015-12-03 12:44:55

@ ryanwaite28 ??? –

将我的搜索过滤器链接到列表项：knockout js

回答

相关问题