HTML 如果未找到数据，则使用消息列出过滤器

Question

我是新手，想问一下关于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>

如果找不到结果，我想添加 'Data not found' like this 这样的消息。

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

Answer 1

首先，您需要知道什么时候找不到数据。

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

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

Answer 2

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

创建一个单独的函数来显示 未找到结果。而不是通过 class hideElement

添加内联样式到 li

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>

HTML 如果未找到数据，则使用消息列出过滤器

HTML list filter with message if no data found

html

javascript

message

list

filter