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

EN

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

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));  
      }
    }    
  }

};

function myFunction() {
  document.getElementById('submenuItems').innerHTML = '';
  // 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) {
      var newA = document.createElement('a');
      newA.setAttribute('href', '#');
      
      newA.appendChild(document.createTextNode(
         li[i].getElementsByTagName('a')[0].textContent));
      
      var newLi = document.createElement('li');
      newLi.appendChild(newA);            
      document.getElementById('submenuItems').appendChild(newLi);

    }
  }
}

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

<p>
Found stuff
<ul id="submenuItems">
</ul>
</p>