可觀察數組中的敲除搜索

Question

我嘗試在可觀察數組中按名稱搜索。 這是我的代碼：

<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

Answer 1

使用計算出的 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 （無論您的搜索查詢如何，此列表始終相同）；
• 一個只讀的計算 observable ，它返回與您的查詢匹配的過濾項目數組；
• 數組filter方法（你在observableArray上調用它，但 KO 只是將它轉發到底層數組）；

正如您在示例中看到的， items將始終包含所有對象，而searchResults只是該數組上的一個過濾的只讀視圖。