Link 我的搜索过滤器列出项目:knockout js
Link my search filter to list items : knockout js
我需要帮助链接我的 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);
});
};
并且我需要在输入搜索输入时更新我的列表和标记。有帮助吗?
也许如果你使用 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>
我需要帮助链接我的 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);
});
};
并且我需要在输入搜索输入时更新我的列表和标记。有帮助吗?
也许如果你使用 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>