创建通过嵌套详细信息标签过滤的搜索栏|软件开发问答库

我正在尝试创建一个搜索栏来过滤嵌套的详细信息标签元素。我有一个嵌套的详细信息标签，如下所示：

<div id="details-info">
  <details>
    <summary><a href="#" class="search">SD</a></summary>
        <p>
          <details style="margin: 0px 0px 0px 30px;">
            <summary class="search">172.17.42.26 </summary>
                <p class="search">3033343857383498</p>
                <p class="search">3038373857383498</p>
                <p class="search">3647595959343498</p>
                <p class="search">374d343857383498</p>
                <p class="search">4253595959343498</p>
                <p class="search">4758343857383498</p>
                <p class="search">5139343857383498</p>
                <p class="search">5837553546353498</p>                  </details>
         </p>
         <p>
         <details style="margin: 0px 0px 0px 30px;">
              <summary class="search">172.17.42.24 </summary>                   <p class="search">5336594e58343498</p>
                  <p class="search">56344f4330393498</p>
                  <p class="search">5a4a444133393498</p>              </details>
         </p>
   </details>
   <details>
      <summary><a href="#" class="search">HinduKush</a></summary>
      <p>
        <details style="margin: 0px 0px 0px 30px;">
          <summary class="search">172.17.42.25 </summary>
          <p class="search">48314b4e58343498</p>
          <p class="search">4f32353857383498</p>
          <p class="search">4f58585959343498</p>
          <p class="search">56365a5959343498</p>
          </details></p></details>
</div>

对于我需要搜索的每个项目，我都有一个类名 search。但是，如何遍历每个标签和子节点进行过滤？我需要一个自动完成的搜索栏。

您是否试图根据搜索值控制子节点的 display？

希望这会有所帮助。

const searchbar = document.getElementById('search-bar');
searchbar.addEventListener('keyup', (event) => {
  const searchKey = event.target.value;
  const nodes = document.querySelectorAll('.search');
  nodes.forEach(node => {
    node.style.display = (node.textContent.indexOf(searchKey) > -1) ? 'block' : 'none';
  })
})

<input type="text" id="search-bar" placeholder="Enter the search key" />
<div id="details-info">
  <details>
    <summary><a href="#" class="search">SD</a></summary>
    <p>
      <details style="margin: 0px 0px 0px 30px;">
        <summary class="search">172.17.42.26 </summary>
        <p class="search">3033343857383498</p>
        <p class="search">3038373857383498</p>
        <p class="search">3647595959343498</p>
        <p class="search">374d343857383498</p>
        <p class="search">4253595959343498</p>
        <p class="search">4758343857383498</p>
        <p class="search">5139343857383498</p>
        <p class="search">5837553546353498</p>
      </details>
    </p>
    <p>
      <details style="margin: 0px 0px 0px 30px;">
        <summary class="search">172.17.42.24 </summary>
        <p class="search">5336594e58343498</p>
        <p class="search">56344f4330393498</p>
        <p class="search">5a4a444133393498</p>
      </details>
    </p>
  </details>
  <details>
    <summary><a href="#" class="search">HinduKush</a></summary>
    <p>
      <details style="margin: 0px 0px 0px 30px;">
        <summary class="search">172.17.42.25 </summary>
        <p class="search">48314b4e58343498</p>
        <p class="search">4f32353857383498</p>
        <p class="search">4f58585959343498</p>
        <p class="search">56365a5959343498</p>
      </details>
    </p></details
  >
</div>

回答2

我不确切知道您的问题是什么，但是如果您想获取每个元素，您可以通过 document.getElementsByClassName 方法在 JS 中执行此操作。这将是一个示例用途：

classes = document.getElementsByClassName("search");

for (let i = 0; i < classes.length; i++){
  document.getElementById("search-result").innerHTML += classes[i].innerText +"<br>"
}

<div id="details-info">
  <details>
    <summary><a href="#" class="search">SD</a></summary>
        <p>
          <details style="margin: 0px 0px 0px 30px;">
            <summary class="search">172.17.42.26 </summary>
                <p class="search">3033343857383498</p>
                <p class="search">3038373857383498</p>
                <p class="search">3647595959343498</p>
                <p class="search">374d343857383498</p>
                <p class="search">4253595959343498</p>
                <p class="search">4758343857383498</p>
                <p class="search">5139343857383498</p>
                <p class="search">5837553546353498</p>                  </details>
         </p>
         <p>
         <details style="margin: 0px 0px 0px 30px;">
              <summary class="search">172.17.42.24 </summary>                   <p class="search">5336594e58343498</p>
                  <p class="search">56344f4330393498</p>
                  <p class="search">5a4a444133393498</p>              </details>
         </p>
   </details>
   <details>
      <summary><a href="#" class="search">HinduKush</a></summary>
      <p>
        <details style="margin: 0px 0px 0px 30px;">
          <summary class="search">172.17.42.25 </summary>
          <p class="search">48314b4e58343498</p>
          <p class="search">4f32353857383498</p>
          <p class="search">4f58585959343498</p>
          <p class="search">56365a5959343498</p>
          </details></p></details>
          <p id="search-result"></p>
</div>

javascript 相关推荐

html 相关推荐