jquery filter search needs to search within categories

Question

I'm creating a jquery filter search.

I want to be able to search within a filtered category. I can filter out categories, but if I search within the selected category the search searches through the whole bunch but not only the selected category.

The search is almost working as it should, but I'm not sure how I can implement the search within categories criteria.

Here is a link to a fiddle

Any help or advise would be very much appreciated

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

You want to search from visible sections only:

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

---

EDIT

To keep searching/filtering functionality I suggest to use detach/attach:

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'));
}

and now you can use your initial search/filtering function

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