javascript - 使用 JS 将多选添加到筛选列表

Question

我需要添加一个多选按钮来过滤 HTML 输出中的列表。目前我已经尝试过这个搜索栏，但它也不起作用。

现在我尝试了以下操作，但我收到一条错误消息，指出 “Uncaught TypeError: Cannot read property 'innerHTML' of undefined at myFunction (search.js:12)”

我的 HTML:

<div class="container" >
  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for names..">
  {% for key, values in data4.iteritems() %}
    <h3> {{key}} </h3>
    <ul id="myUL">
      {% for client in values %}
        <li>{{ client[25] }} - {{ client[13] }} -  {{ client[16] }} - <b>Nights/Days</b> - {{ client[21] }} - <b>Adults</b> - {{ client[0] }} - <b>Children</b> - {{ client[1] }} - <b>Status</b> - {{ client[3] }}</li>
      {% endfor %}
    </ul>
  {% endfor %}
</div>
<div class="container">

我的JS:

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

我做错了什么？我似乎无法弄清楚为什么这不起作用。

非常感谢任何帮助

Answer 1

我在这一行看到了问题

a = li[i].getElementsByTagName("a")[0];

应该有 anchor 标签指向getElementsByTagName 但是好像没有 anchor