[英]Knockout search in observable array
我尝试在可观察数组中按名称搜索。 这是我的代码:
<input class="form-control" data-bind="value: Query, valueUpdate: 'keyup'" autocomplete="off">
我在 ViewModel 中的代码
viewModel.Query = ko.observable('');
viewModel.search = function(value) {
viewModel.TestList.removeAll();
for (var x in viewModel.TestList) {
if (viewModel.TestList[x].Name.toLowerCase().indexOf(value.toLowerCase()) >= 0) {
viewModel.TestList.push(viewModel.TestList[x]);
}
}
}
viewModel.Query.subscribe(viewModel.search);
第一:我想按名称字符串搜索。 二:是否有其他解决方案不从视图中删除所有元素? 我的意思是当查询字符串为空时,应该再次出现所有列表。
现在我有错误消息:
TypeError: viewModel.TestList[x].Name is undefined
使用计算出的 observable 数组来显示搜索结果,如下所示:
var viewModel = { items: [ { Name: "Apple part" }, { Name: "Apple sauce" }, { Name: "Apple juice" }, { Name: "Pear juice" }, { Name: "Pear mush" }, { Name: "Something different" } ] }; viewModel.Query = ko.observable(''); viewModel.searchResults = ko.computed(function() { var q = viewModel.Query(); return viewModel.items.filter(function(i) { return i.Name.toLowerCase().indexOf(q) >= 0; }); }); ko.applyBindings(viewModel);
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> <input class="form-control" data-bind="value: Query, valueUpdate: 'keyup'" autocomplete="off"> <h3>Search results:</h3> <ul data-bind="foreach: searchResults"> <li data-bind="text: Name"></li> </ul> <h3>All items:</h3> <ul data-bind="foreach: items"> <li data-bind="text: Name"></li> </ul>
这也消除了对订阅或单独功能的需要。
这个例子利用了:
items
常规observableArray
(无论您的搜索查询如何,此列表始终相同);filter
方法(你在observableArray
上调用它,但 KO 只是将它转发到底层数组); 正如您在示例中看到的, items
将始终包含所有对象,而searchResults
只是该数组上的一个过滤的只读视图。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.