Question

我正在尝试搜索列表并成功，但列表中的项目太多，您需要滚动很多才能到达底部。然后我想出了这个想法，所以我的27类项目按字母顺序隐藏在下拉菜单中。

示例：对于类别1，以A开头的项目位于名为A的下拉菜单中。当您单击它时，它们应该出现（它们会出现，但搜索功能不起作用）。

实际上是否可以搜索dropmenus中的隐藏内容并期望它们在我没有按下dropmenu按钮并且只是在搜索框中键入项目时出现？如果是的话，你能彻底解释一下吗？

到目前为止，我所拥有的内容是一个可搜索的表格：

＆＃13;

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++) {
    a = li[i].getElementsByTagName("a")[0];
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

＆＃13;

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 12px;
  background-repeat: no-repeat;
  width: 96%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

#myUL {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#myUL li a {
  border: 1px solid #ddd;
  margin-top: -1px;
  /* Prevent double borders */
  background-color: #f6f6f6;
  padding: 12px;
  text-decoration: none;
  font-size: 18px;
  color: black;
  display: block
}

＆＃13;

<input type="text" id="myInput" onkeyup="myFunction()" maxlength="80" placeholder="Enter text" title="Text">
<ul id="myUL">
  <li><a href="#" class="header">Category 1</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item </a></li>
  <li><a href="#" class="header">Category 2</a></li>
  <li><a href="#">Item</a></li>
  <li><a href="#">Item</a></li>
</ul>

＆＃13;

我如何实现我对此代码的想法，或者我是否必须更改我的代码？

可搜索的删除表JS CSS

0 个答案: