javascript - jquery filter search 需要在类别内搜索

Question

我正在创建一个 jquery 过滤器搜索。

我希望能够在过滤后的类别中进行搜索。我可以过滤掉类别，但如果我在选定的类别中搜索，搜索将搜索整个类别，而不仅仅是选定的类别。

搜索几乎可以正常工作，但我不确定如何在类别条件内实现搜索。

这里是一个链接 fiddle

非常感谢任何帮助或建议

$(document).ready(function(){
  $("#searchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#searchFilterDiv div.CompanyDirectoryItem").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
    if($('#searchFilterDiv div.CompanyDirectoryItem:visible').length===0){
          $('.error').show();
        }else{
          $('.error').hide();
        }
  });
});


  $(".filter-button").on("click", function(){
   
         var selectItem = $(this).data('category');
         filter(selectItem);
    });


  function filter(e) {
      var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
      		$('.CompanyDirectoryItem').hide().filter(function () {
          return regex.test($(this).data('name'))
      }).show();
  
      if($('.CompanyDirectoryItem:visible').length===0){
        $('.error').show();
      }else{
        $('.error').hide();
      }
}


$('.box-item').on('click', function(){
    $('.box-item').removeClass('selected');
    $(this).addClass('selected');
});

.search-form-item{

  margin-top: 30px;
  background-color: #f9f9f9;
  border: 1px solid lightgrey;
  margin-bottom: 2em;
  padding: 20px;
  font-size: .9em;
  text-align: left;
}

/* Thjonusta AO */

.boxes-centered{
  text-align:center;
}

.box-item{
  color: #333;
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 20px 10px;
  margin: 1.7em .8em 1.7em .8em;
  max-width: 10vw;
  font-size: 1.1em;
  font-weight: 500;
  cursor: pointer;
  display:inline-block;
  float:none;
  text-align:center;
}

.box-item:hover{
  border-color: blue;
  }
.box-item.selected{
  border-color:red;
  
  color:red;
}
.search-form-service {
  
  border: 1px solid lightgray;
  margin-left: 8.333%;
  margin-right: 8.333%;
  background: #fff;}
  .search-form-service .form-control {
    border-radius: 0 !important;
    box-shadow: none;
    -webkit-appearance: none;
    border: 0;
    height: 50px;
    font: 18px "DINPro", Arial, sans-serif;
    padding: 15px;
    color: #4b4b4b; }
    .search-form-service .form-control::-moz-placeholder {
      color: #4b4b4b;
      opacity: 1; }
    .search-form-service .form-control:-ms-input-placeholder {
      color: #4b4b4b; }
    .search-form-service .form-control::-webkit-input-placeholder {
      color: #4b4b4b; }
    @media (max-width: 767px) {
      .search-form-service .form-control {
        font-size: 16px;
        height: 50px;
        padding: 10px 12px; } }
  .search-form-service .btn-search {
    border-width: 0 0 0 1px; }
  .search-form-service .input-group-btn {
    z-index: 5; }
  .search-form-service.type2 {
    max-width: 281px; }
    .search-form-service.type2 .form-control {
      height: 39px;
      padding: 8px 15px; }
    .search-form-service.type2 .btn-search {
      min-width: 57px;
      height: 39px; }

/*Custom Media Quearies */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container form-container">
<div class="row search-form-item">
  <div class="col-md-10 col-md-offset-1 searchtext-input search-form-service">
    <input class="form-control" id="searchInput" type="text" placeholder="Search">
  </div>
	<div class="row boxes-centered">
	    <div class="col-md-2 col-md-offset-1 box-item filter-button" data-category="EveryCat">Every Category</div>
	    <div class="col-md-2 box-item filter-button" data-category="Category1">Category1</div>
	    <div class="col-md-2 box-item filter-button" data-category="Category2">Category2</div>
	    <div class="col-md-2 box-item filter-button" data-category="Category3">Category3</div>
			<div class="col-md-2 box-item filter-button" data-category="Category4">Category4</div>

	</div>
</div>

</div><!-- / container -->
    
<div id="searchFilterDiv">

  <div class="CompanyDirectoryItem" data-name="EveryCat, Category1">  
    <h3>this belongs to Category1</h3>
    <p>Some text, more text more text more text  </p>
    <a href="#">some link</a>
  </div>
  
  
  <div class="CompanyDirectoryItem" data-name="EveryCat, Category2">  
    <h3>this belongs to Category2</h3>
    <p>Some text, more text more text more text  </p>
    <a href="#">some link</a>
  </div>

  <div class="CompanyDirectoryItem" data-name="EveryCat, Category3">  
    <h3>Item belongs to Category3</h3>
    <p>Some text, more text more text more text  </p>
    <a href="#">some link</a>
  </div>
  
    <div class="CompanyDirectoryItem" data-name=" EveryCat, Category4">  
    <h3>Item in Cat 4</h3>
    <p> this item belongs to Category4 </p>
    <a href="#">some link</a>
  </div>
  
  
   <div class="CompanyDirectoryItem" data-name="EveryCat, Category4, Category1">  
    <h3> this belongs to 1 and Category4</h3>
    <p>Some text, text about this item that belongs to category 1 and 4   </p>
    <a href="#">some link</a>
  </div>
  
   <div class="CompanyDirectoryItem" data-name="EveryCat, Category3, Category2">  
    <h3>Item belongs to Category2 and Category3</h3>
    <p>Some text, more text more text more text  Category2 and Category3 txoeljljl  </p>
    <a href="#">some link</a>
  </div>
 
    <div class="alert alert-error"></div>
  
<div class="error search-results-box-item" style="display: none;">
 <h3>No Results</h3>
 <p> Search gave no results, please try again </p>
</div>
</div> <!-- searchFilterDiv ends -->

Answer 1

您只想从可见部分搜索:

$("#searchFilterDiv div.CompanyDirectoryItem:visible").filter(function() {

---

编辑

为了保持搜索/过滤功能，我建议使用分离/附加:

let tmp=[];
function filter(e) {
  if(tmp.length>0)
    tmp.map(x => x.appendTo($('#searchFilterDiv')));

    var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');         
    $('.CompanyDirectoryItem').detach().filter(function () {
      if(regex.test($(this).data('name')))
        return true
      else
        tmp.push($(this))
    }).appendTo($('#searchFilterDiv'));
}

现在您可以使用您的初始搜索/过滤功能

$("#searchFilterDiv div.CompanyDirectoryItem").filter(function() {