为什么我的代码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>

​