Knockout.js子字符串搜索异常：仅匹配完全一致的标题内容

嘿，我一眼就揪出你代码里的问题啦！核心是判断逻辑搞反了，还缺了关键的筛选返回值，导致筛选功能完全不符合预期。

问题拆解 #

1. 判断顺序颠倒：
   你写的 self.filter().includes(location.title) 是在检查搜索输入的内容是否包含标题——这只有当输入内容比标题长，或者和标题完全一致时才会匹配，和你想要的「标题包含搜索内容」完全相反。

2. 缺少筛选返回值：
   ko.utils.arrayFilter 要求回调函数返回布尔值，用来决定当前项是否留在筛选结果里。你现在只做了console.log，没返回判断结果，所以筛选后的数组始终是空的。

3. 可选优化：大小写不敏感匹配
   默认的includes区分大小写，比如用户输入「london」，标题「London」会匹配失败，统一转成小写就能解决这个问题。

修复后的代码 #

JavaScript 部分

推荐用Knockout的计算属性（自动响应搜索内容变化，不用手动绑定事件），修复判断逻辑并加上返回值：

var viewModel = function() { 
  var self = this; 
  self.filter = ko.observable(''); 

  // 计算属性：自动追踪filter的变化，实时更新筛选结果
  self.filteredLocationList = ko.computed(function() {
    // 统一转小写，实现大小写不敏感匹配
    var searchText = self.filter().toLowerCase();
    return ko.utils.arrayFilter(model, function(location) {
      // 核心修正：判断标题是否包含搜索文本
      return location.title.toLowerCase().includes(searchText);
    });
  });

  // 如果坚持要用原有的函数式写法（不推荐，不如计算属性简洁），修改如下：
  /*
  self.locationList = ko.observableArray(model);
  self.filterList = function(){ 
    var searchText = self.filter().toLowerCase();
    self.locationList(ko.utils.arrayFilter(model, function(location) {
      return location.title.toLowerCase().includes(searchText);
    })); 
  };
  */
}; 

HTML 部分

用计算属性的话，不需要手动绑定keyup事件，直接渲染筛选后的列表即可：

<div class="col-lg-12"> 
  <div class="input-group"> 
    <input data-bind="textInput: filter" type="text" class="form-control" placeholder="Filter Places" aria-describedby="basic-addon2" id="test"> 
    <button id="basic-addon2" data-bind="click: filterList">Filter</button> <!-- 仅用手动函数时需要这个绑定 -->
  </div> 
  <!-- 示例：渲染筛选后的结果列表 -->
  <ul data-bind="foreach: filteredLocationList">
    <li data-bind="text: title"></li>
  </ul>
</div>

小提示：为什么推荐计算属性？ #

Knockout的计算属性会自动追踪依赖（这里就是self.filter()），只要搜索框内容变化，筛选结果就会实时更新，不需要手动绑定keyup或点击事件，完全贴合Knockout的响应式设计理念，代码更简洁可靠。

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