为什么我的代码 textContent.indexOf 无法比较输入值

Question

代码在几个月前还可以工作，但最近停止工作了
当我输入一些单词时，它可以自动搜索列表中的项目
我一直在尝试从教训代码，但它仍然不工作

这是我的代码

function search() {
let search = document.querySelector('#search');
let li = document.querySelectorAll('li');
for (let data of li) {
console.log(data.textContent.indexOf(search))
if (data.textContent.indexOf(search) > -1) {
data.style.display = '';
} else {
data.style.display = 'none'
}
}
}

<input type="text" id="search" onkeyup="search()">
<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>

Answer 1

使用。value

下面是一个更短的改进脚本:

const lis = document.querySelectorAll('#phone li');
document.getElementById('search').addEventListener('input', function() {
const val = this.value.trim().toLowerCase(); // remove the two .toLowerCase() if you want to be case sensitive
lis.forEach(li => li.hidden = search != "" && !li.textContent.toLowerCase().includes(val));
})

<input type="text" id="search" autocomplete="off">
<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>

Answer 2

你需要输入的值

function search() {
let search = document.querySelector('#search');
let li = document.querySelectorAll('li');
for (let data of li) {
console.log(data.textContent.indexOf(search.value))
if (data.textContent.indexOf(search.value) > -1) {
data.style.display = '';
} else {
data.style.display = 'none'
}
}
}

Answer 3

您应该使用.value来获取文本输入的值。在下面的代码片段中使用了.toLowerCase()。它将显示元素(li)，无论大小写。

function search() {
let search = document.querySelector('#search').value.toLowerCase();
let lists = document.querySelectorAll('li');
const listsLen = lists.length;

for (let i = 0; i < listsLen; ++i) {
const listContent = lists[i].textContent.toLowerCase();
if (listContent.indexOf(search) > -1) {
lists[i].style.display = 'block';
} else {
lists[i].style.display = 'none';
}
}
}

<input type="text" id="search" onkeyup="search()">
<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>