Javascript 使用knockout.js搜索和筛选

我想做的是创建一个搜索，以查找符合搜索条件的项目。例如，如果我想找一本书叫《冰与火之歌》。。。一首“一首歌”就足以找到一个过滤结果搜索临界值是按书名搜索的

我通过mvc控制器从sql server数据库获取数据，并在客户端站点使用此方法，该方法实际上运行良好，并在表中显示数据（因为我仅在获取此数据时进行测试）

PS:这里最重要的是，最终结果是，我没有显示任何网格/表格中的所有书籍，也没有在该表格上执行搜索/筛选，所有这些都应该在搜索中自交，并且只能通过搜索方法找到

更新1

self.search = function (value) {
            self.AllBooks.removeAll();
            for (var x in self.AllBooks) {
                if (self.AllBooks[x].toLowerCase().indexOf(value.toLowerCase()) >= 0) {
                    self.AllBooks.push(self.AllBooks[x]);
                }
            }
        }

---

在搜索函数中，您迭代“ListOfBooks”数组，并将与搜索条件匹配的元素添加到同一数组ListOfBooks。这将复制与条件匹配的元素。

var-ListOfBooks=[“JavaBook”、“C#Book”、“JavaScriptBook”、“HTMLBook”]；
var value=“Java”；
for（书本列表中的变量x）{
if（图书列表[x].toLowerCase（）.indexOf（value.toLowerCase（））>=0）{
books.push（ListOfBooks[x]）；
}
}
日志（图书列表）使用它更干净、更高效

var _=require("underscore");
var ListOfBooks = ["JavaBook", "C#Book", "JavaScriptBook", "HTMLBook"];
var searchBook="Java";
var filteredBooks = _.filter(ListOfBooks, function(books) {
    return books.toLowerCase().indexOf(searchBook.toLowerCase() )>= 0;
});
console.log("filteredBooks " +JSON.stringify(filteredBooks));

因为您使用的是击倒，所以我将向您展示一种更为“被动”的、典型的击倒方式来处理此功能

viewmodel应该有一个私有数据源属性。在您的情况下，列出所有永不更改的书籍。您应该而不是清除此列表

然后，在另一个属性中，存储一个
computed
数据（书籍）列表。此列表采用
过滤器
功能，并将其应用于完整数据源

筛选方法依赖于您的搜索查询（
value
，在您的搜索方法中）。让我们让它
可见
，以便我们知道何时触发更新

下面是一个对原始代码进行最小更改的示例，将所有代码放在一起：


功能手册（数据）{
var self=这个；
for（var输入数据）{
此[键]=ko.可观察（数据[键]==null？”：数据[键]；
}
}
函数BookViewModel（数据）{
var self=这个；
self.title=ko.observable（）；
self.searchQuery=ko.observable（“”）；
//数据源
self.ListOfBooks=ko.observearray（[]）；
对于（变量i=0；i



通过


（尝试搜索以下书籍：）



通过

好的，我明白。像.removeAll（）这样的东西不能解决这个问题吗？类似这样的事情：请参见更新这不是处理的最佳代码实践。。你为什么不看看下划线js
filter
函数呢？尽管我非常感谢你的帮助，但问题是关于knockout.js而不是下划线.js。我会考虑你的未来，但现在我正在努力学习KokOut.Jyeh，我知道…但我真的想解决这个与淘汰赛，因为其他的事情处理与淘汰，这是伟大的！最后一个问题。有没有办法把“所有这些”放在搜索栏里……这意味着，如果我输入“mocking bird”，建议会在搜索栏里显示比无序列表中更大的内容？我建议使用css来设置列表的样式，使其看起来像是搜索栏的一部分。如果你只针对现代浏览器，你也可以看看规范，它提供了类似的功能。对于谷歌来说，现成的自动完成插件也是值得的。我编辑了第二个例子，让它看起来更像是一个自动完成的功能完美，这正是我想要的！现在我需要通过代码一步一步地了解id的作用。非常感谢。如果您有任何关于特定代码位的问题，请随时提问！很乐意帮忙。