javascript - 如何使用列表搜索过滤器显示 "No results"消息？

Question

当列表中没有找到匹配项时，如何正确显示“无结果”消息？当我输入时，输入无法正常工作。

即使在搜索期间有结果，也会显示该消息。

function search() {

  input = document.querySelector("#input_search")

  filter = input.value.toUpperCase()

  list_items = document.querySelectorAll("li")
  list_items.forEach(item => {

    a = item.getElementsByTagName("a")[0];

    txt = a.textContent || a.innerText;

    if (txt.toUpperCase().indexOf(filter) > -1) {
      item.style.display = "";
    } else {
      item.style.display = "none";
    }


    if (window.getComputedStyle(item, null).getPropertyValue("display") == 'none') {
      document.querySelector(".no-result").style.display = 'block';
    } else {
      document.querySelector(".no-result").style.display = 'none';
    }
  })
}

document.querySelector("#input_search").addEventListener('input', () => search())

<input type="search" id="input_search" placeholder="Search">

<ul id="list">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

<div class="no-result" style="display: none;">No results</div>

Answer 1

您可以在 forEach 外部设置一个标志，在找到匹配的第一个结果时将其切换为 true - 然后设置 No 的显示结果基于此的消息

目前，您正在检查每次循环后是否显示No result消息，这就是您得到错误值的原因

function search() {
  let match = false;
  input = document.querySelector("#input_search")

  filter = input.value.toUpperCase()

  list_items = document.querySelectorAll("li")
  list_items.forEach(item => {

    a = item.getElementsByTagName("a")[0];

    txt = a.textContent || a.innerText;

    if (txt.toUpperCase().indexOf(filter) > -1) {
      match = true
      item.style.display = "";
    } else {
      item.style.display = "none";
    }
  })
  
  if (match === false) {
    document.querySelector(".no-result").style.display = 'block';
  } else {
    document.querySelector(".no-result").style.display = 'none';
  }
}

document.querySelector("#input_search").addEventListener('input', () => search())

<input type="search" id="input_search" placeholder="Search">

<ul id="list">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

<div class="no-result" style="display: none;">No results</div>

但是，我认为您的代码中有一些内容可以改进 - 如果您想查看，我已将其添加为另一个片段；我已经评论了主要变化

function search() {
  // 'let' to define your variables in the currect scope
  let input = document.querySelector("#input_search");
  let list_items = document.querySelectorAll("li");
  let filter = input.value.toUpperCase();
  
  let match = false;
  
  list_items.forEach(item => {
    // No reason to target `a` elements, or to check .innerText - .textContent will handle it
    // Might as well .toUpperCase() as you get the value
    let text = item.textContent.toUpperCase();
    
    // ES6 includes because it's cleaner ( personally )
    if (text.includes(filter)) {
      match = true;
      item.style.display = 'block';
    } else {
      item.style.display = 'none';
    }
  });
  
  // Can use a terniary operator for a single line if / else
  document.querySelector(".no-result").style.display = match ? 'none' : 'block';
}

document.querySelector("#input_search").addEventListener('input', () => search())

<input type="search" id="input_search" placeholder="Search">

<ul id="list">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>
  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>
  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul>

<div class="no-result" style="display: none;">No results</div>