时间戳

首页 > 解决方案 > 让 JavaScript 函数显示结果而不是隐藏结果

javascript - 让 JavaScript 函数显示结果而不是隐藏结果

问题描述

因此，我通过 W3Schools 找到了此代码，并将其更改为我喜欢的学校项目。目前，它是一个下拉列表，当输入时会删除拼写不同的结果。我想要做的是反转这个，它们都开始隐藏，当输入结果时，它会显示，非常感谢！

function searchFunction() {
  // Declare variables
  var input, filter, ul, li, a, i;
  input = document.getElementById("illnessSearch");
  filter = input.value.toUpperCase();
  ul = document.getElementById("illnessList");
  li = ul.getElementsByTagName("li");

  // Loop through all list items, and hide those who don't match the search query
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
  // Via: https://www.w3schools.com/howto/howto_js_search_menu.asp
}
#illnessSearch {
  width: 50%;
  font-size: 20px;
  padding: 20px;
  font-family: Tahoma, sans-serif;
  border: 1px solid #ddd;
}

#illnessList {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#illnessList li a {
  width: 50%;
  padding: 20px;
  font-family: Tahoma, sans-serif;
  font-weight: bold;
  text-decoration: none;
  color: black;
  display: block
}

#illnessList li a:hover {
  background-color: #666666;
}
<div>
  <br class="a">
  <center>
    <input type="text" id="illnessSearch" onkeyup="searchFunction()" placeholder="&#128269; | Illness 
        name...">

    <ul id="illnessList" class="dropdown-content">
      <li><a href="coronavirus.php">CORONAVIRUS</a></li>
      <li><a href="hay-fever.php">HAY FEVER</a></li>
      <li><a href="influenza-adult.php">INFLUENZA (ADULT)</a></li>
      <li><a href="influenza-child.php">INFLUENZA (CHILD)</a></li>
      <li><a href="lyme-disease.php">LYME DISEASE</a></li>
    </ul>
  </center>
</div>

标签： javascripthtmlcss

解决方案

您基本上拥有它，您需要做的就是默认隐藏元素。因为您的 JavaScript 引用了li，所以我必须添加一个样式以li默认隐藏它。一旦用户开始输入，它就会显示出来。我还添加了一个检查以在文本框为空时隐藏所有结果。

function searchFunction() {
    // Declare variables
    var empty = false;
    var input, filter, ul, li, a, i;
    input = document.getElementById("illnessSearch");
    if(input.value.length < 1){
      empty = true;
    }
    filter = input.value.toUpperCase();
    ul = document.getElementById("illnessList");
    li = ul.getElementsByTagName("li");

    // Loop through all list items, and hide those who don't match the search query
    for (i = 0; i < li.length; i++) {
        a = li[i].getElementsByTagName("a")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1 && !empty) {
            li[i].style.display = "block";
        } else {
            li[i].style.display = "none";
        }
    }
    // Via: https://www.w3schools.com/howto/howto_js_search_menu.asp
}
#illnessSearch {
      width: 50%;
      font-size: 20px;
      padding: 20px;
      font-family: Tahoma, sans-serif;
      border: 1px solid #ddd;
}

#illnessList {
      list-style-type: none;
      padding: 0;
      margin: 0;
}
#illnessList li {
display: none;
}
#illnessList li a {
      width: 50%;
      padding: 20px;
      font-family: Tahoma, sans-serif;
      font-weight: bold;
      text-decoration: none;
      color: black;
      display: block;
}

#illnessList li a:hover {
      background-color: #666666;
}
<div>
    <br class="a">
    <center>
    <input type="text" id="illnessSearch" onkeyup="searchFunction()" placeholder="&#128269; | Illness 
    name...">

    <ul id="illnessList" class="dropdown-content">
        <li><a href="coronavirus.php">CORONAVIRUS</a></li>
        <li><a href="hay-fever.php">HAY FEVER</a></li>
        <li><a href="influenza-adult.php">INFLUENZA (ADULT)</a></li>
        <li><a href="influenza-child.php">INFLUENZA (CHILD)</a></li>
        <li><a href="lyme-disease.php">LYME DISEASE</a></li>
    </ul>
    </center>
</div>

推荐阅读