javascript - 使用js在html中搜索选项

Question

我需要根据提供的输入搜索内容。例如)如果我提供 k 作为输入，它应该过滤内容并显示名称 akila 和地点 uk。这里面临的问题是第一个元素被过滤。Html 元素的堆叠如下面的代码所示

working sample is linked here

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

        }
    }
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li>
  <a href="#">Names</a>
  <!--ul id 1-->
  <ul id="corp">
   <li><a href="#"><div><span>akila</span></div></a></li>
  <li><a href="#"><div><span>agnes</span></div></a></li>
  </ul>
  
  </li>
  <li>
  
  <a href="#">Place</a>
   <!--ul id 2-->
  <ul id="region">
   <li><a href="#"><div><span>USA</span></div></a></li>
  <li><a href="#"><div><span>UK</span></div></a></li>
  </ul>
  
  </li>
  

</ul>

Answer 1

问题是 - 您选择了太多 li元素并将您的 css 更改(隐藏/显示)应用到某些 li您不应该使用的元素。

这里是根据您的要求进行修复和重构的代码。但是，从您的问题中尚不清楚该列表是否是动态生成的。

如果是动态生成的 - 那么获取所有 li 的逻辑应该在生成列表后立即发生，而不是每次更改过滤器输入时发生。

如果它是静态列表 - 另一个答案有更好的解决方案选择 li基于 ids 的元素。然而，您应该在加载脚本时构建列表，而不是每次更改过滤器输入时构建列表。

我将功能分解为单独的函数。

function filter_input(key, targetEl, el) {
 if (targetEl.innerText.toUpperCase().indexOf(key) > -1) {
  el.style.display = "";
 } else {
  el.style.display = "none";
 }
}

function filterAll(all_li, filter){
   for (i = 0; i < all_li.length; i++) {
        var span = all_li[i].getElementsByTagName("span")[0];
        filter_input(filter, span, all_li[i]);
    }
}

function buildList() {
  var ul, li, a, i, major_list, all_li;
  
  ul = document.getElementById("myUL");
  major_list = ul.getElementsByTagName("ul");
    
  all_li = [];
  for (j = 0; j < major_list.length; j++) {
    var minor_list = major_list[j].getElementsByTagName("li");
    for (x = 0; x < minor_list.length; x++) {
      all_li.push(minor_list[x]);
    }
  }
  
  return all_li;
}

function myFunction() {
  var input, filter;
  
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
    
  filterAll(buildList(), filter);
}

<input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names.." title="Type in a name">

<ul id="myUL">
  <li>
  <a href="#">Names</a>
  <!--ul id 1-->
  <ul id="corp">
   <li><a href="#"><div><span>akila</span></div></a></li>
  <li><a href="#"><div><span>agnes</span></div></a></li>
  </ul>
  
  </li>
  <li>
  
  <a href="#">Place</a>
   <!--ul id 2-->
  <ul id="region">
   <li><a href="#"><div><span>USA</span></div></a></li>
   <li><a href="#"><div><span>UK</span></div></a></li>
  </ul>
  
  </li>
  

</ul>