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.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>

df['Test'] = df['Test'].str.replace(r'\b([A-Z]{1,2})([A-Z][a-z])', r'\1 \2')

自更改项目标签以来，我的搜索功能已停止运行。

1 个答案: