Question

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

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 = ul.getElementsByTagName("li");会返回包含<li>

的<ul>

它应该只返回名称或位置的<li>

以下是更新的代码（包含问题/修复的评论）：

function myFunction() {
    var input, filter, li, a, i; // removed ul variable
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    li = document.querySelectorAll("#corp li, #region li"); // get only li elements that are names or places

   for (i = 0; i < li.length; i++) {
        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> <!-- Your code was also returning this li -->
    <a href="#">Names</a>
    
    <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> <!-- Your code was also returning this li -->
    <a href="#">Place</a>
    
    <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 2

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

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

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

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

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

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>

使用js在html中搜索选项

2 个答案: