javascript - 显示在另一个类中搜索的结果

Question

这段代码显示了通过javascript搜索列表的结果

<script>
function myFunction() {
// Declare variables
var input, filter, ul, li, a, i;
input = document.getElementById('myInput');
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName('li');

// Loop through all list items, and hide those who don't match the search query
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";
    }
}

}

html代码是:

 <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">

<ul id="myUL">
<li><a href="#">Adele</a></li>
<li><a href="#">Agnes</a></li>

<li><a href="#">Billy</a></li>
<li><a href="#">Bob</a></li>

<li><a href="#">Calvin</a></li>
<li><a href="#">Christina</a></li>
<li><a href="#">Cindy</a></li>
</ul> 

但我想要js代码搜索第一个li列表并保存它们，最后将结果显示到另一个地方(id= submenuItems)，就像这个类一样:

<li>
    <div class="dropdownlink"><i class="fa fa-road" aria-hidden="true"></i>tittle
        <i class="fa fa-chevron-down" aria-hidden="true"></i>
    </div>
    <ul id="submenuItems">
        <li><a href="#">list1</a></li>
        <li><a href="#">list1</a></li>
    </ul>
</li>

Answer 1

JsFiddle: https://jsfiddle.net/txe1sp43/45/

HTML:

<input type="text" id="myInput" placeholder="Search for names...">

<ul class="myUL">
  <li><a href="#">Adele</a></li>
  <li><a href="#">Agnes</a></li>

  <li><a href="#">Billy</a></li>
  <li><a href="#">Bob</a></li>

  <li><a href="#">Calvin</a></li>
  <li><a href="#">Christina</a></li>
  <li><a href="#">Cindy</a></li>
</ul> 

<ul class="myUL">
  <li><a href="#">Albert</a></li>
  <li><a href="#">Audrey</a></li>

  <li><a href="#">Beau</a></li>
  <li><a href="#">Bonny</a></li>

  <li><a href="#">Clyde</a></li>
  <li><a href="#">Christine</a></li>
  <li><a href="#">Chris</a></li>
</ul> 

<ul id="submenuItems"></ul>

和 JavaScript:

const input = document.getElementById("myInput");
const out = document.getElementById("submenuItems");

// Define event-listener for keyup event
input.onkeyup = () => {
    // Clear outputlist
  out.innerHTML = "";

  // Don't do anything if input field has been cleared
  if (input.value === "") return;

  // Declare variables
  const filter = input.value.toUpperCase();
  const ul = document.getElementsByClassName("myUL");
  const res = [];

  // Loop through all lists and look for matches to filter
  for (let j = 0; j < ul.length; j++) {
    const li = ul[j].getElementsByTagName('li');
    for (let i = 0; i < li.length; i++) {
      const a = li[i].getElementsByTagName("a")[0];
      // For each match, add a new li to output and insert a copy of the link to that
      if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        const newLi = out.appendChild(document.createElement("li"));
        newLi.appendChild(a.cloneNode(true));  
      }
    }    
  }

};