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

【问题标题】：Link my search filter to list items : knockout js将我的搜索过滤器链接到列表项：knockout js
【发布时间】：2016-03-07 07:05:30
【问题描述】：

我需要帮助链接我的 ul 和 li 以自动过滤搜索。我不知道从哪里开始。

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);
  });
};

当我输入搜索输入时，我需要更新我的列表和标记。帮忙？

【问题讨论】：

请阅读以下内容：stackoverflow.com/help/mcve 并更好地解释您想要做什么。 “当我输入搜索输入时，我需要更新我的列表和标记。”那个清单在哪里？什么是标记？搜索输入在哪里？这个问题到底是什么意思？
您可能希望对过滤结果使用计算：knockoutjs.com/documentation/computedObservables.html

标签： javascript jquery html css knockout.js

【解决方案1】：

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

查看片段。

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>

【讨论】：