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

应该将锚标记指向getElementsByTagName但似乎没有锚

Answer 2

好吧所以snehi56说的是正确的。我现在通过执行以下操作使搜索功能正常工作，但它并没有隐藏它应该存在的一切。

新编辑的HTML：

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


                                            {% for key, values in data4.iteritems() %}
                                            <div class="booking-reference">
                                                <h3> {{key}} </h3>
                                                <ul id="myUL">
                                                    {% for client in values %}
                                                    <li><span>{{ client[25] }}</span> - {{ 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>
                                            </div>
                                            {% endfor %}

                                        </div>
                                        <div class="container">

编辑JS：

function myFunction() {
// Declare variables
var input, filter, ul, li, a, i;
var bookings =  $(".booking-reference");
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("span")[0];
        console.log(a, a.innerHTML.toUpperCase().indexOf(filter));
    if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
        li[i].style.display = "";
    } else {
        li[i].style.display = "none";
    }
}

}

因此，这不会再出现错误，它会按原样进行搜索。但是我认为因为我使用循环在HTML中迭代我的结果它没有隐藏所有不匹配的项目，因为它应该在{{keys}

之后

我想我应该隐藏整个div＆＃34;我称之为预订 - 参考＆＃34;但不知道如何

Answer 3

您可以为您的div提供ID或名称，并使用JS隐藏它。

var x = document.getElementById('booking-reference-div');
x.style.display = 'block'; //none

使用JS添加多选以过滤列表

3 个答案: