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>

但是我想搜索第一个li列表并保存它们的js代码，最后将结果显示到类似此类的另一个地方（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));  
      }
    }    
  }

};

Answer 2

类似这样的东西：

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>

显示结果搜索另一个班级

2 个答案: