Javascript 筛选出显示空的选择列表

我正在用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或为空，则返回所有产品，这是正常的。但是，当我为产品编写特定类别时，没有任何产品被退回

试试这个代码

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);

---

在代码中有一个小错误，即每当您输入任何值时，在计算的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);

---

首先将this.item.ProductCategory.toLowerCase更改为item.ProductCategory.toLowerCase。我已经更改了，现在控制台显示以下错误。未捕获类型错误：未定义不是一个函数。你能为这个做一把小提琴吗。好的@raheelshan让我在那里做一把小提琴@raheelshan链接到fiddle顺便问一下，我想知道为什么ko.utils.stringStartsWith不起作用？有什么想法吗！实际上，ko.utils.stringStartsWith未在缩小的ko文件中导出，因此，如果使用缩小的ko，它将不起作用。看到这把小提琴了吗