Jadi saya telah menemukan kode ini melalui W3Schools dan saya telah mengubahnya sesuai dengan keinginan saya untuk proyek sekolah saya. Saat ini, ini adalah dropdown yang ketika diketik menghapus hasil yang tidak dieja sama. Apa yang ingin saya lakukan adalah membalikkan ini di mana mereka semua mulai tersembunyi dan ketika hasilnya diketik di dalamnya akan ditampilkan, terima kasih banyak!

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>
0
Washton 13 Mei 2021, 03:30

1 menjawab

Jawaban Terbaik

Anda pada dasarnya memilikinya, yang perlu Anda lakukan hanyalah menyembunyikan elemen secara default. Karena JavaScript Anda merujuk pada li, saya harus menambahkan gaya untuk li untuk menyembunyikannya secara default. Setelah pengguna mulai mengetik, itu akan ditampilkan. Saya juga menambahkan tanda centang untuk menyembunyikan semua hasil saat kotak teks kosong.

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>
2
Dharman 13 Mei 2021, 00:47