javascript - Knockout search in observable array - Stack Overflow

admin管理员组

文章数量:1289889

I try to search by name in observable array. Here's my code:

<input class="form-control" data-bind="value: Query, valueUpdate: 'keyup'" autoplete="off">

And my code in 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);

First: I would like to search by name string. Two: Is there any other sollutions to not remove all elements from the view? I mean when query string is empty, there should be all list again.

Now I have error message:

TypeError: viewModel.TestList[x].Name is undefined

I try to search by name in observable array. Here's my code:

<input class="form-control" data-bind="value: Query, valueUpdate: 'keyup'" autoplete="off">

And my code in 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);

First: I would like to search by name string. Two: Is there any other sollutions to not remove all elements from the view? I mean when query string is empty, there should be all list again.

Now I have error message:

TypeError: viewModel.TestList[x].Name is undefined

• javascript
• knockout.js
• knockout-2.0

Share Improve this question Follow asked Apr 16, 2015 at 6:40 mskuratowskimskuratowski 4,1241818 gold badges6565 silver badges116116 bronze badges 5

• you need an if(value) removeAll() guard – dandavis Commented Apr 16, 2015 at 6:44
• this should work try this viewModel.TestList()[x].Name – super cool Commented Apr 16, 2015 at 6:48
• try this which works fine jsfiddle/LkqTU/23731 . cheers – super cool Commented Apr 16, 2015 at 7:20
• @cheers I have an error mesage: TypeError: item.name is undefined if (item.name.toLoweCase().indexOf(value.trim().toLowerCase()) > -1) { – mskuratowski Commented Apr 16, 2015 at 7:41
• 1 i see nothing can you share how you reproduced it ? – super cool Commented Apr 16, 2015 at 8:39

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Use a puted observable array to show search results, along these lines:

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.puted(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./ajax/libs/knockout/3.2.0/knockout-min.js"></script>

<input class="form-control" data-bind="value: Query, valueUpdate: 'keyup'" autoplete="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>

This also removes the need for a subscription or seperate function.

This example utilizes:

• A regular observableArray for storing all items (this list is always the same, regardless of your search query);
• A read-only puted observable which returns a filtered array of items that match your query;
• The array filter method (you call it on the observableArray, but KO just forwards it to the underlying array);

As you can see in the example, items will always contain all objects, and searchResults is just a filtered read-only view on that array.

本文标签： javascriptKnockout search in observable arrayStack Overflow