Question

我正在使用Knockout进行一些过滤。我写了这段代码请看看。

        $(function() {
        var viewmodel = (function () {
            var filter = ko.observable("");
            var productsList = ko.observableArray([
                {
                    ProductName: "Sunsilk",
                    ProductCategory:"Shampo"
                },
                {
                    ProductName: "Badminton",
                    ProductCategory: "Sports"
                },
                {
                    ProductName: "Chicken",
                    ProductCategory: "Meat"
                },
                {
                    ProductName: "Head and Shoulder",
                    ProductCategory: "Shampo"
                },
                {
                    ProductName: "Book",
                    ProductCategory: "Education"
                },
                {
                    ProductName: "Pen",
                    ProductCategory: "Education"
                }

            ]);

            return {
                productsList: productsList,
                filter: filter,



            };
        }());
        viewmodel.filteredItems = ko.computed(function () {
            var filter = this.filter().toLowerCase();
            if (!filter) {
                return this.productsList();
            } else {
                return ko.utils.arrayFilter(this.productsList, function (item) {
                    return ko.utils.stringStartsWith(this.item.ProductCategory.toLowerCase(), filter);
                });
            }
        }, viewmodel);
        ko.applyBindings(viewmodel);

    });

以下是HTML

<h4> << Decision based on filter >> </h4>
        <p><span>Filter: </span><input data-bind="value:filter" type="text" name="filterbox"/>    <button name="filter">Filter</button></p>
        <select data-bind="options:filteredItems,optionsText:'ProductName'" multiple="multiple" size="3"></select>

过滤器不起作用。我被卡住了，任何人都可以帮助我。如果给定的过滤器值为null或为空，则返回所有产品，这是可以的。但是，当我为产品编写特定类别时，不会返回任何产品。

Fiddle here

Answer 1

试试这段代码

viewmodel.filteredItems = ko.computed(function () {
        var filter = viewmodel.filter().toLowerCase();
        if (!filter) {
            return viewmodel.productsList();
        } else {
            return ko.utils.arrayFilter(viewmodel.productsList, function (i,item) {
   if(item.ProductCategory)
   {
                return   ko.utils.stringStartsWith(item.ProductCategory.toString().toLowerCase(), filter);
   }
            });
        }
    }, viewmodel);

Answer 2

代码中存在一个小错误，在计算出“ if ”条件时，无论何时输入任何值，我都会返回true，并且我也更改了过滤逻辑。

 viewmodel.filteredItems = ko.computed(function () {
   var filter = viewmodel.filter().toLowerCase();
   if (!filter && filter === "") {
     return viewmodel.productsList();
   } else {
    return ko.utils.arrayFilter(viewmodel.productsList(), function (item) {
        if (item.ProductCategory) {
            return item.ProductCategory.toLowerCase().indexOf(filter) !== -1;//will return true if ProductCategory contains the filter string
        }
    });
  }

 }, viewmodel);

Fiddle Demo

在挖空中过滤显示空的选择列表

2 个答案: