jQuery过滤器搜索需要在类别内搜索

Question

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

我希望能够在过滤的类别中进行搜索。 我可以过滤出类别，但是如果我在所选类别中搜索，则搜索将搜索整个对象，而不仅限于所选类别。

搜索几乎可以正常进行，但是我不确定如何在类别标准内实现搜索。

这是小提琴的链接

任何帮助或建议将不胜感激

 $(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() {