Question

我正在一个网站上工作，作为项目的一部分。我们的想法是能够按标题过滤div标签。例如，如果您想搜索“电视”或“音乐”等，

我的想法是使用每个div的ID进行搜索和过滤。任何有关如何做到这一点或任何方法的建议都非常感谢！

搜索栏：

<input id="search-bar" class="options-button" type="text" placeholder="Search Categories...">

要搜索的Div标记：

<div class="discover-tile" id="television">
       <h2 class="discover-title">Television</h2>
       <p class="discover-info">Description</p>
       <button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
       <h2 class="discover-title">Movies</h2>
       <p class="discover-info">Description</p>
       <button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
       <h2 class="discover-title">Music</h2>
       <p class="discover-info">Description</p>
       <button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>

div的CSS：

.discover-subscribe, .discover-unsubscribe {
    width: calc(100% + 14px);
    text-align: center;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    color: white;
    background: #63c401;
    border: none;
    font-size: 14px;
    margin: 14px 0 -14px -14px;
    padding: 10px 10px;
    text-shadow: rgba(0,0,0,0.4) 0 0 6px;
    box-shadow: rgba(0,0,0,0.3) 0 0 4px;
    transition: background 0.2s ease-in-out;
}
.discover-unsubscribe {
    background: #DE1B1B;
}
.discover-subscribe:hover {
    background: #52A301;
}
.discover-unsubscribe:hover {
    background: #B81616;
}

Answer 1

使用Array的forEach()：

尝试以下方法

var divEl = document.querySelectorAll('div.discover-tile');
divEl.forEach(function(d){
  if(d.getAttribute('id') == 'television'){
    console.log(d);
  }
});

<div class="discover-tile" id="television">
       <h2 class="discover-title">Television</h2>
       <p class="discover-info">Description</p>
       <button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
       <h2 class="discover-title">Movies</h2>
       <p class="discover-info">Description</p>
       <button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
       <h2 class="discover-title">Music</h2>
       <p class="discover-info">Description</p>
       <button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>

或者您可以使用filter()之类的：

var divEl = document.querySelectorAll('div.discover-tile');
var television = Array.prototype.filter.call(divEl, function(d){
  return d.getAttribute('id') == 'television';
});

console.log(television);

<div class="discover-tile" id="television">
   <h2 class="discover-title">Television</h2>
   <p class="discover-info">Description</p>
   <button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="movies">
   <h2 class="discover-title">Movies</h2>
   <p class="discover-info">Description</p>
   <button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>
<div class="discover-tile" id="music">
   <h2 class="discover-title">Music</h2>
   <p class="discover-info">Description</p>
   <button type="submit" class="discover-unsubscribe">Unsubscribe</button>
</div>

Answer 2

所提供的答案并不涵盖您将遇到的所有陷阱。我建议你尝试使用list.js进行过滤 - 它非常强大，占用空间非常小。

http://listjs.com/

我已经在几个项目中使用它，它坚如磐石，易于设置。

Answer 3

您可以通过以下方式进行操作：

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myList div").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

<div class="container">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

  <h2>
example to filter div content</h2>
  <input class="form-control" id="myInput" type="text" placeholder="Search..">
  <br>
  <div class="list-group" id="myList">
  <div>Label 1</div>
  <div>Label 2</div>
  <div>asdf 1</div>
  <div>asdf 2</div>
  </div>  
</div>

如何实现搜索和过滤到HTML div？

3 个答案: