搜索栏只搜索第一个 p 标签

Question

我正在尝试使用 .net core MVC 在我的 webb 应用程序中实现搜索栏。

我在网上找到了一些代码，但问题是它只会根据第一个 p-tag 进行搜索。 在将显示设置为无之前，无法弄清楚如何使其搜索所有 p-tags。

这是我的 JS 函数：

function myFunction() {
    var input, filter, ul, li, p, 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++) {
        p = li[i].getElementsByTagName("p")[0];
        txtValue = p.textContent || p.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

这是我的cshtml：

<ul id="myUL" style="display: inline;
                    list-style: none;">
    @await foreach (var logopedist in Model)
    {
            <li class="lijst" style="margin-top: 10px;
        padding-left: 10px;
        background-color: #1d71b8;
        color: #ffffff;
        font-size: 10pt;
        padding-right: 10px;
        padding-bottom: 5px;
        padding-top: 5px;">
                <p style="font-size:14px; font-weight:bold;">@logopedist.Naam, @logopedist.PraktijkNaam</p>
                <p>@logopedist.Adres</p>
                <p>@logopedist.Email</p>
                <p>@logopedist.Mobiel</p>
            </li>
        }

Answer 1

我推荐这个版本

window.addEventListener("load", function() {
  document.getElementById("myInput").addEventListener("input", function() {
    const filter = this.value.toUpperCase();
    [...document.querySelectorAll("#myUL li")].forEach(li =>  {
      const txtValue = (li.textContent || li.innerText).toUpperCase();
      li.classList.toggle("hide",txtValue.indexOf(filter) === -1)
    });
  })
})

#myUL {
  display: inline;
  list-style: none;
}

#myUL li {
  margin-top: 10px;
  padding-left: 10px;
  background-color: #1d71b8;
  color: #ffffff;
  font-size: 10pt;
  padding-right: 10px;
  padding-bottom: 5px;
  padding-top: 5px;
}

.lijst p {
  font-size: 14px;
  font-weight: bold;
}

.hide { display:none }

<input id="myInput" />

<ul id="myUL" style="">
  <li class="lijst">
    <p>NaamA PraktijkB</p>
    <p>AdresA</p>
    <p>logopedistA@Email.com</p>
    <p>0612345678</p>
  </li>
  <li class="lijst">
    <p>NaamC PraktijkD</p>
    <p>AdresC</p>
    <p>logopedistB@Email.com</p>
    <p>0687654321</p>
  </li>