可观察数组中的淘汰赛搜索

Posted 2023-05-07

【中文标题】可观察数组中的淘汰赛搜索

【英文标题】：Knockout search in observable array

【发布时间】：2015-06-22 09:53:11

【问题描述】：

我尝试在可观察数组中按名称搜索。这是我的代码：

<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

【问题讨论】：

你需要一个if(value) removeAll() 守卫

这应该可以试试这个viewModel.TestList()[x].Name

试试这个效果很好jsfiddle.net/LkqTU/23731。欢呼

@cheers 我有一条错误消息：TypeError: item.name is undefined if (item.name.toLoweCase().indexOf(value.trim().toLowerCase()) > -1)

我没看到你能分享你是如何复制它的吗？

【参考方案1】：

使用计算的可观察数组来显示搜索结果，如下所示：

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>

这也消除了订阅或单独功能的需要。

本例使用：

A regular observableArray 用于存储所有 items（无论您的搜索查询如何，此列表始终相同）； A read-only computed observable 返回与您的查询匹配的过滤项数组； The array filter method（你在 observableArray 上调用它，但 KO 只是将它转发到底层数组）；

正如您在示例中看到的，items 将始终包含所有对象，而searchResults 只是该数组上经过过滤的只读视图。

【讨论】：

所以这意味着在我的 html 中我需要隐藏和显示 searchResults 和 items 数组？