自从我更改了商品标签后，我的搜索功能就停止工作了。

Question

我有一个带有可点击按钮的下拉列表。它们最初在标签中，但我不得不将它们更改为复选框，以允许某些功能。当我更改它们时，我的搜索功能停止工作。我尝试更改搜索.js，但无法弄清楚为什么它不起作用。

这是我的.html

<div class="dropdown">
  <button type="button" id="hobbyFilter" onclick="openHobbyFilter()" class="dropbtn">Hobbies</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
    <input type="checkbox" id="hobbies" href="hobby">Hobby</input><br>
    <input type="checkbox" id="hobbies" href="cycling">Cycling</input><br>
    <input type="checkbox" id="hobbies" href="runing">Running</input><br>
    <input type="checkbox" id="hobbies" href="sky diving">Sky Diving</input><br>
    <input type="checkbox" id="hobbies" href="bmx">BMX</input><br>
  </div>
</div><br>

这是我的.js

function filterFunction() {
      var input, filter, ul, li, a, i;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      div = document.getElementById("myDropdown");
      a = div.getElementsById("hobbies");
      for (i = 0; i < a.length; i++) {
        if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
          a[i].style.display = "show";
        } else {
          a[i].style.display = "none";
        }
      }
    }

Answer 1

您不能获得多个ID，因为它们应该是唯一的。尝试将它们更改为类，然后将a = div.getElementsById("hobbies");更改为a = div.getElementsByClassName("hobbies");，如下所示：

​

function filterFunction() {
      var input, filter, ul, li, a, i;
      input = document.getElementById("myInput");
      filter = input.value.toUpperCase();
      div = document.getElementById("myDropdown");
      a = div.getElementsByClassName("hobbies");
      for (i = 0; i < a.length; i++) {
        if (a[i].innerHTML.toUpperCase().indexOf(filter) > -1) {
          a[i].style.display = "show";
        } else {
          a[i].style.display = "none";
        }
      }
    }

<div class="dropdown">
  <button type="button" id="hobbyFilter" onclick="openHobbyFilter()" class="dropbtn">Hobbies</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
    <input type="checkbox" class="hobbies" href="hobby">Hobby</input><br>
    <input type="checkbox" class="hobbies" href="cycling">Cycling</input><br>
    <input type="checkbox" class="hobbies" href="runing">Running</input><br>
    <input type="checkbox" class="hobbies" href="sky diving">Sky Diving</input><br>
    <input type="checkbox" class="hobbies" href="bmx">BMX</input><br>
  </div>
</div><br>

​