如果未找到数据，则带有消息的 HTML 列表过滤器答案

【问题标题】：HTML list filter with message if no data found如果未找到数据，则带有消息的 HTML 列表过滤器
【发布时间】：2018-04-20 15:21:21
【问题描述】：

我是新手，想问一下关于 HTML 列表过滤的问题。

我从

找到了这个脚本

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_filters_list

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div class="w3-container">
  <h2>Filter List</h2>
  <p>Search for a name in the input field.</p>

  <input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="myInput" onkeyup="myFunction()">
  <ul class="w3-ul w3-margin-top" id="myUL">
    <li>Adele</li>
    <li>Agnes</li>
    <li>Billy</li>
    <li>Bob</li>
    <li>Calvin</li>
    <li>Christina</li>
    <li>Cindy</li>
  </ul>
</div>

<script>
function myFunction() {
    var input, filter, ul, li, a, i;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    ul = document.getElementById("myUL");
    li = ul.getElementsByTagName("li");
    for (i = 0; i < li.length; i++) {
        if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}
</script>

</body>
</html>

如果没有找到结果，我想添加类似“找不到数据”like this 的消息。

如何做到这一点？谢谢。对不起我的英语不好。

【问题讨论】：

标签： javascript html list filter message

【解决方案1】：

首先，您需要知道何时找不到数据。

在循环前声明一个变量isFound = false；并在找到消息时将其设置为 true。

然后您声明一个带有内容Data not found 的div，并在循环之后切换它，就像您对其他列表项所做的那样。

【讨论】：

【解决方案2】：

添加一个单独的div 以显示未找到结果并默认隐藏此元素。

创建一个单独的函数来显示 Result Not Found 。而不是向li 添加内联样式，而是通过hideElement 类添加它

function myFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    if (li[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].classList.remove('hideElement');
    } else {
      li[i].classList.add('hideElement');
    }
  }
  // Calling function to decide if no result div need to be shown or not
  // passing the total `li` element.Ideally this should be total li
  // which are child of ul in consideration
  displayNoResult(li.length)
}

function displayNoResult(allLI) {
  // get all the li which have hideElement as class
  // if this is equal to the number of li that infers that all li are
  // having hideElement  class, which also infers that there is no matched
  // result. In that case so the div for no result
  var hiddenLILength = document.querySelectorAll('li.hideElement');
  if (allLI === hiddenLILength.length) {
    document.getElementById('noResult').classList.remove('hideElement')
  } else {
    document.getElementById('noResult').classList.add('hideElement')
  }
}

.hideElement {
  display: none;
}

<h2>Filter List</h2>
<p>Search for a name in the input field.</p>

<input class="w3-input w3-border w3-padding" type="text" placeholder="Search for names.." id="myInput" onkeyup="myFunction()">
<ul class="w3-ul w3-margin-top" id="myUL">
  <li>Adele</li>
  <li>Agnes</li>
  <li>Billy</li>
  <li>Bob</li>
  <li>Calvin</li>
  <li>Christina</li>
  <li>Cindy</li>
</ul>
<div class="hideElement" id="noResult">
  Result not found
</div>
</div>

【讨论】：