循环 <li> 并显示包含输入值的列表

【问题标题】：Loop through <li> and display list containing input value循环 <li> 并显示包含输入值的列表
【发布时间】：2021-09-21 20:30:32
【问题描述】：

我有一个项目列表，例如待办事项列表，并且我有一个搜索输入，我希望用户在其中搜索列表'

我正在使用 keyup 事件，如果输入匹配，我尝试使用 css 将匹配的 li 设置为 display:'' 而不匹配的列表项我想设置 display:none。

到目前为止，我能够 console.log 我的结果，但不能影响对我的 li 列表的更改，因为设置为 display none 的 css 不起作用。

下面是我的代码。

    const Ul = document.querySelector('.clipBoard');
const search = document.querySelector('.search');
    
    
    array.forEach((item) => {
      let button = document.createElement('button');
      button.className =
        'list-group-item buttonLi';
      button.innerText += item;
      Ul.appendChild(button);
      
      
      //Search function
      search.addEventListener('keyup', () => {
        let filterValue = search.value;

        const li = Ul.querySelectorAll('.buttonLi');
        
        for (let i = 0; i < li.length; i++) {
          let List = li[i];

          if (List.innerHTML.indexOf(filterValue) > -1) {
            console.log(li[i].innerHTML);
            li[i].style.display = '';
          } else {
            li[i].style.display = 'none';
          }
        }
      });

【问题讨论】：

• list[i] 是否真的为您提供了 HTML 元素？如果是这样，您可以在更改之前控制台记录元素的显示属性。我也认为您不应该更改为display = ''，而是相应地更改为display = block
• 是的，当我 console.log 时，list[i] 确实返回了一个 HTML 元素。 display = block 也不起作用。因为我在浏览器中的
• 保持不变。我的意图是当用户输入时，包含输入字母的
• 保留，而不包含输入字母的
• 设置为 display = 'none'，因此从列表中删除。