Knockout.JS搜索功能报错：Uncaught TypeError: 无法读取undefined的toLowerCase属性

这个错误指向非常明确：你在调用toLowerCase()方法时，目标值是undefined——也就是说，你尝试搜索的位置相关字段（比如dropAddress）在某些记录里没有被赋值，或者绑定的属性本身不存在。

错误根源分析 #

从你提供的代码片段来看，你的ko.utils.stringStartsWith函数虽然做了string = string || " "的空值处理，但如果你的搜索逻辑是先对位置字段调用toLowerCase()，再传入这个函数，那空值处理就没覆盖到这一步。举个常见的错误场景：

// 错误示例：如果record.dropAddress是undefined，这里直接调用toLowerCase会报错
self.filteredItems = ko.computed(function() {
  var searchText = self.searchInput().toLowerCase();
  return ko.utils.arrayFilter(self.records(), function(record) {
    return record.dropAddress.toLowerCase().includes(searchText);
  });
});

具体修复方案 #

这里有几个简单且有效的修复方式，你可以根据自己的代码结构选择：

1. 给目标字段加空值兜底

在调用toLowerCase()前，先确保字段有默认值（空字符串）：

// 把record.dropAddress.toLowerCase()改成下面这样
(record.dropAddress || "").toLowerCase()

这样即使dropAddress是undefined或null，也会被转换成空字符串，避免报错。

2. 增强你的stringStartsWith函数

让它自带空值处理和大小写不敏感支持，这样后续调用更省心：

ko.utils.stringStartsWith = function(string, startsWith, caseInsensitive = false) {
  // 统一处理空值，转为空字符串
  const targetStr = (string || "").trim();
  const prefix = (startsWith || "").trim();

  if (prefix.length > targetStr.length) return false;

  // 按需处理大小写
  if (caseInsensitive) {
    return targetStr.toLowerCase().startsWith(prefix.toLowerCase());
  }
  return targetStr.startsWith(prefix);
};

调用的时候就可以直接传字段，不用额外处理：

// 例子：大小写不敏感的前缀匹配
return ko.utils.stringStartsWith(record.dropAddress, searchText, true);

3. 确保Record模型的字段有默认值

在创建Record实例时，给所有可能用于搜索的字段设置默认空字符串，从源头避免undefined：

var Record = function(dropType, dropName, dropAddress, ...rest) {
  this.dropType = dropType || "";
  this.dropName = dropName || "";
  this.dropAddress = dropAddress || ""; // 给地址字段默认空字符串
  // 其他属性同理处理
};

调试小技巧 #

如果不确定是哪个字段出问题，可以在过滤函数里加个日志，打印每条记录的目标字段：

return ko.utils.arrayFilter(self.records(), function(record) {
  console.log("当前记录地址:", record.dropAddress); // 看看有没有undefined的情况
  // 你的搜索逻辑
});

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