Question

我试图让过滤搜索栏工作，当您在栏中输入列表时过滤列表的结果，并且它不起作用。我试图添加一个事件监听器，但似乎也没有。任何想法？

JS

function myFunction() {
    // search for robots
    var input, filter, ul, li, a, i;
    input = document.getElementById('searchbox1');
    filter = input.value.toUpperCase();
    ul = document.getElementById("robotlist");
    li = ul.getElementsByClassName('robotlist1');

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

列表的html我试图搜索：

<fieldset>
<legend>Mr. Robot's Top Robot Models</legend>

<ul id="robotlist">
<li class="robotlist1">
  <article id="robo1">
  <h4>
  <label for="imgrobo1">  Name:</label>
     R.E.T.</h4>
  <img id="imgrobo1" src="images/roboDog.png" width=200 height=200 alt="robo1">

  <h5><strong>Description:</strong> <br>This was our first robot.
   He was modeled after the famous movie character E.T.</h5>
</article>
</li>

<li class="robotlist1">
  <article id="robo2">
<h4>
<label for="imgrobo2">  Name:</label>
   Butler.Bot</h4>
<img id="imgrobo2" src="images/robot2.png" width=200 height=200 alt="robo1">

<h5><strong>Description:</strong> <br>This was our second robot.
 He makes a mean martini!</h5>
</article>
</li>
<li class="robotlist1">
  <article id="robo3">
  <h4>
  <label for="imgrobo3">  Name:</label>
     Mega Man</h4>
  <img id="imgrobo3" src="images/robot3.png" width=200 height=200 alt="robo1">

  <h5><strong>Description:</strong> <br>This is our newest model.
   This one will follow you around the house.</h5>

</article>

</li>
</ul>
</fieldset>

无法使过滤搜索栏工作

0 个答案: