使用 Div 和结构化列表搜索 JS

Question

我正在尝试创建搜索功能，但无法使其正常工作。不显示任何结果。我看到输入正在“onkeyup”处理，但没有显示结果，它只显示一个空屏幕。我相信这是因为 Div 的深度级别，但我不确定。

我已将 Input 字段类设置为与 JS 匹配，并且我看到某些东西正在运行。我只是不知道为什么它没有显示结果。对于简单的 UL LI 结构似乎可以工作。

我是新人，学习 JS，喜欢在工作中学习，所以我仍在研究解决方案。

function myFunction() {
  var input, filter, ul, li, a, i, txtValue;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  ul = document.getElementById("myUL");
  li = ul.getElementsByTagName("li");
  for (i = 0; i < li.length; i++) {
    a = li[i].getElementsByTagName("a")[0];
    txtValue = a.textContent || a.innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      li[i].style.display = "";
    } else {
      li[i].style.display = "none";
    }
  }
}

<form class="page-search-form" role="search">
  <div class="input-search input-search-dark">
    <i class="input-search-icon md-search" aria-hidden="true"></i>
    <input type="text" class="form-control" id="myInput" name="search" onkeyup="myFunction()" placeholder="Search Users">

    <button type="button" class="input-search-close icon md-close" aria-label="Close"></button>
  </div>
</form>
<ul class="list-group" id="myUL">



  <li class="list-group-item">
    <div class="media">
      <div class="pr-0 pr-sm-20 align-self-center">
        <div class="avatar avatar-online">
          <img src="../../../global/portraits/1.jpg" alt="...">
          <i class="avatar avatar-busy"></i>
        </div>
      </div>
      <div class="media-body align-self-center">
        <h5 class="mt-0 mb-5 name">
          Herman Beck
          <small>Last Access: 1 hour ago</small>
        </h5>
        <p>
          <i class="icon icon-color md-pin" aria-hidden="true"></i> Street 4425 Golf Course Rd
        </p>
        <div>
          <a class="text-action" href="javascript:void(0)">
            <i class="icon icon-color md-email" aria-hidden="true"></i>
          </a>
          <a class="text-action" href="javascript:void(0)">
            <i class="icon icon-color md-smartphone" aria-hidden="true"></i>
          </a>
          <a class="text-action" href="javascript:void(0)">
            <i class="icon icon-color bd-twitter" aria-hidden="true"></i>
          </a>
          <a class="text-action" href="javascript:void(0)">
            <i class="icon icon-color bd-facebook" aria-hidden="true"></i>
          </a>
          <a class="text-action" href="javascript:void(0)">
            <i class="icon icon-color bd-dribbble" aria-hidden="true"></i>
          </a>
        </div>
      </div>
      <div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center">
        <button type="button" class="btn btn-primary btn-sm">Follow</button>
      </div>
    </div>
  </li>

Answer 1

类似这样简化的脚本

你没有内容。 H5 或媒体主体可以

window.addEventListener("load", function() {
  const lis = document.querySelectorAll("#myUL li");

  document.getElementById("myInput").addEventListener("input", function() {
    const filter = this.value.toUpperCase().trim();
    lis.forEach(li => {
      if (filter === "") li.classList.remove("hide");
      else {
        const textContainer = li.querySelector(".media-body");
        const txtValue = textContainer.textContent.toUpperCase();
        li.classList.toggle("hide", !txtValue.includes(filter))
      }
    })
  })
})

.hide {
  display: none;
}

<form class="page-search-form" role="search">
  <div class="input-search input-search-dark">
    <i class="input-search-icon md-search" aria-hidden="true"></i>
    <input type="text" class="form-control" id="myInput" name="search" placeholder="Search Users">

    <button type="button" class="input-search-close icon md-close" aria-label="Close"></button>
  </div>
</form>
<ul class="list-group" id="myUL">



  <li class="list-group-item">
    <div class="media">
      <div class="pr-0 pr-sm-20 align-self-center">
        <div class="avatar avatar-online">
          <img src="../../../global/portraits/1.jpg" alt="...">
          <i class="avatar avatar-busy"></i>
        </div>
      </div>
      <div class="media-body align-self-center">
        <h5 class="mt-0 mb-5 name">
          Herman Beck
          <small>Last Access: 1 hour ago</small>
        </h5>
        <p>
          <i class="icon icon-color md-pin" aria-hidden="true"></i> Street 4425 Golf Course Rd
        </p>
        <div>
          <a class="text-action" href="javascript:void(0)">
            <i class="icon icon-color md-email" aria-hidden="true"></i>
          </a>
          <a class="text-action" href="javascript:void(0)">
            <i class="icon icon-color md-smartphone" aria-hidden="true"></i>
          </a>
          <a class="text-action" href="javascript:void(0)">
            <i class="icon icon-color bd-twitter" aria-hidden="true"></i>
          </a>
          <a class="text-action" href="javascript:void(0)">
            <i class="icon icon-color bd-facebook" aria-hidden="true"></i>
          </a>
          <a class="text-action" href="javascript:void(0)">
            <i class="icon icon-color bd-dribbble" aria-hidden="true"></i>
          </a>
        </div>
      </div>
      <div class="pl-0 pl-sm-20 mt-15 mt-sm-0 align-self-center">
        <button type="button" class="btn btn-primary btn-sm">Follow</button>
      </div>
    </div>
  </li>

Answer 2

刚刚通过替换意识到我的错误： a = li[i].getElementsByTagName("a")[0]; 至 a = li[i].getElementsByTagName("h5")[0];