JS实现列表搜索时textContent.indexOf无法匹配输入值如何解决

AI 小北

2026-8-27

列表实时搜索失效修复

核心问题定位

你的代码逻辑存在1个关键错误，直接导致筛选完全不生效：

变量search存储的是#search输入框的DOM对象本身，而非用户输入的关键词文本。调用字符串方法indexOf()时传入DOM对象，JS会自动把对象转成字符串[object HTMLInputElement]，这个内容不可能出现在任何列表项文本里，所以所有匹配判断都会返回不通过。你打开控制台看之前写的console.log输出，全都是-1，就是这个原因导致的。

之前功能正常大概率是早期代码里你取了输入框的value属性，后续调整代码时不小心漏写了.value，和教程示例对照时没注意到这个细节。

修复后完整代码

JavaScript部分

function searchList() {
  // 取输入框元素后，通过.value获取用户输入的文本，顺手转小写做不区分大小写匹配，trim去掉首尾空格
  const keyword = document.querySelector('#search').value.trim().toLowerCase();
  const listItems = document.querySelectorAll('#phone li');
  for (const item of listItems) {
    const itemText = item.textContent.toLowerCase();
    // 判断列表项文本是否包含输入关键词
    item.style.display = itemText.includes(keyword) ? '' : 'none';
  }
}

HTML部分

只需要把输入框绑定的函数名改成和修复后的JS函数名一致即可，其余部分不需要改动：

<input type="text" id="search" onkeyup="searchList()" placeholder="输入关键词搜索">
<ul id="phone">
  <li>iPhone 12</li>
  <li>iPhone 12 Pro</li>
  <li>iPhone 12 Pro Max</li>
  <li>iPhone 12 Mini</li>
  <li>iPad Air</li>
  <li>iPad Pro</li>
  <li>iMac</li>
  <li>Mac book Air</li>
  <li>Mac book Pro</li>
  <li>Mac Pro</li>
  <li>Test</li>
</ul>