如何制作只能在一组 div 中搜索特定元素的搜索过滤器？答案

【问题标题】：How do I make a search filter that you can only search for a specifc element within a set of divs?如何制作只能在一组 div 中搜索特定元素的搜索过滤器？
【发布时间】：2021-07-31 03:18:14
【问题描述】：

目前，我可以通过输入大厅容器中的任何内容（包括名称、位置、容量）来搜索大厅，但是，我只想能够过滤搜索大厅名称的结果。

<div id="searchFilter" class="flexColumn">
      <label for="searchFilterText">Search for Community Halls</label>
      <input type="text" id="searchFilterText" placeholder="Search for the name of a community hall">
</div>

`<div class="hall">
      <div class="info">
          <p>${data.Halls[halls[i]].Location[0].Address}, ${data.Halls[halls[i]].Location[1].Suburb}<br>Capacity: ${data.Halls[halls[i]].Room[0]["Standing Capacity"]}</p> 
      </div>
      <div class="image">
          <img class="img" src="${data.Halls[halls[i]].Description[4].Photos}" alt="${data.Halls[halls[i]]["Hall Name"]}">
      </div>
      <div class="hallNameBox">
           <p class="hallName">${data.Halls[halls[i]]["Hall Name"]}</p>
      </div>
 </div>`;

$(document).ready(function(){
  $("#searchFilterText").on("keyup", function() {
    let value = $(this).val().toLowerCase();
    $(".hall").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

【问题讨论】：

您可以在过滤后检查是否没有任何 div 可见，然后您可以显示所有 .hall div，这意味着用户没有输入大厅名称。

标签： javascript jquery filter

【解决方案1】：

不要使用toggle，而是使用show 和hide。

（使用one、two 或three 来测试这个简化的示例）。

$(function() {
  $("#searchFilterText").on('keyup', function() {

    // Grab the value
    const value = $(this).val().toLowerCase();

    // If it's not empty
    if (value) {

      // `filter` all the hall elements if
      // the text of the hallName element doesn't start with
      // the value and hide them
      $('.hall').filter(function() {
        const text = $(this).find('.hallName').text().toLowerCase();
        return !text.startsWith(value);
      }).hide();

    // Otherwise show them
    } else {
      $('.hall').show();
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="searchFilter" class="flexColumn">
<input type="text" id="searchFilterText" />
</div>

<div class="hall">
  <div class="hallNameBox">
    <p class="hallName">One</p>
  </div>
</div>
<div class="hall">
  <div class="hallNameBox">
    <p class="hallName">Two</p>
  </div>
</div>
<div class="hall">
  <div class="hallNameBox">
    <p class="hallName">Three</p>
  </div>
</div>

【讨论】：

【解决方案2】：

$(document).ready(function(){
  $("#searchFilterText").on("keyup", function() {
    let value = $(this).val().toLowerCase();
    $(".hall *").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

这是你想要的吗？如果没有，请告诉我。

【讨论】：

不抱歉。我只需要能够输入一个大厅名称，对于那些不匹配的，整个大厅 div 被删除。如果搜索容量或位置，则不会发生任何事情。
它只是在您尝试搜索时删除所有大厅名称。我不知道我是否对自己想做的事情足够具体。
不完全是。这是它的样子：imgur.com/JKjNDap我希望相思岭大厅盒子在你搜索它时将所有东西都放在里面，并且那些黑盒子消失并且只看到与搜索匹配的大厅（这只是一个案例）。