KnockoutJS可观察数组过滤功能实现求助

我来帮你修复这个KnockoutJS过滤的问题吧，你的代码里有几个关键逻辑错误，咱们一步步调整：

先说说你代码里的问题 #

1. ko.utils.arrayFilter用错了：这个函数的回调需要返回true或false，用来决定当前元素是否留在过滤后的数组里，不是返回元素本身或者直接删除原数组的元素。你现在直接调用self.locationList.remove(location)会把原始数据删掉，后续清空搜索框也恢复不了，这肯定不对。
2. 条件判断冗余：location.title == self.filter()完全被location.title.includes(self.filter())覆盖了——完全匹配的时候includes也会返回true，没必要分开判断。
3. 没有保留原始数据：直接修改原数组的话，过滤操作是不可逆的，咱们得把原始数据存起来，用衍生的结果来做展示。

修正后的实现（推荐用计算属性，实时响应输入） #

这个版本会在用户输入时自动更新过滤结果，不用手动点按钮，体验更好：

ViewModel代码

var viewModel = function() {
    var self = this;
    self.filter = ko.observable('');
    // 保存原始数据，绝对不要修改这个数组
    self.originalLocationList = ko.observableArray(model);
    
    // 计算属性：自动监听filter的变化，实时返回过滤后的数组
    self.filteredLocationList = ko.computed(function() {
        // 转成小写，实现不区分大小写的搜索，提升用户体验
        var filterText = self.filter().toLowerCase();
        return ko.utils.arrayFilter(self.originalLocationList(), function(location) {
            // 如果过滤文本为空，返回所有元素；否则检查title是否包含关键词
            return filterText === '' || location.title.toLowerCase().includes(filterText);
        });
    });
};

// 别忘了初始化ViewModel
ko.applyBindings(new viewModel());

View代码

<section class="col-lg-2 sidenav">
    <div class="row">
        <div class="col-lg-12">
            <div class="input-group">
                <!-- textInput会实时响应每一次输入，自动更新filter -->
                <input 
                    data-bind="textInput: filter" 
                    type="text" 
                    class="form-control" 
                    placeholder="Filter Places" 
                    aria-describedby="basic-addon2" 
                    id="test"
                >
                <!-- 如果还是想要按钮，可以保留，但计算属性已经实时更新了，按钮可以做额外操作比如清空输入 -->
                <button 
                    data-bind="click: function() { self.filter(''); }" 
                    id="basic-addon2"
                >
                    <i class="glyphicon glyphicon-filter"></i> Reset Filter
                </button>
            </div>
        </div>
        <div class="col-lg-12">
            <hr>
            <!-- 绑定到过滤后的数组，而不是原始数组 -->
            <div data-bind="foreach: filteredLocationList">
                <p data-bind="text: $data.title"></p>
            </div>
        </div>
    </div>
</section>

如果一定要用按钮触发过滤（非实时） #

要是你就想保留点击按钮才过滤的逻辑，那可以这么改，核心还是别碰原始数组：

ViewModel代码

var viewModel = function() {
    var self = this;
    self.filter = ko.observable('');
    self.originalLocationList = ko.observableArray(model);
    // 专门用来展示的数组，只在过滤时更新
    self.displayLocationList = ko.observableArray(model);
    
    self.filterList = function(){
        var filterText = self.filter().toLowerCase();
        var filteredItems = ko.utils.arrayFilter(self.originalLocationList(), function(location) {
            return filterText === '' || location.title.toLowerCase().includes(filterText);
        });
        // 更新展示用的数组，原始数组不动
        self.displayLocationList(filteredItems);
    };
};

ko.applyBindings(new viewModel());

对应View的修改

把foreach绑定改成displayLocationList，按钮绑定filterList：

<div data-bind="foreach: displayLocationList">
    <p data-bind="text: $data.title"></p>
</div>

<button data-bind="click: filterList" id="basic-addon2">
    <i class="glyphicon glyphicon-filter"></i> Filter
</button>

关键要点总结 #

• 永远保留原始数据源，用衍生数组做展示，避免数据丢失。
• ko.computed是Knockout里处理依赖变化的利器，适合这种需要实时响应输入的场景。
• 转小写实现不区分大小写搜索，是用户体验的小细节，建议加上。

内容的提问来源于stack exchange，提问作者meddy