CODEWITHSUNDEEP
javascriptjqueryhtml
Dunit
Dunit

Reputation: 73

search filter keeps on searching all categories Jquery

Hi I'm a total newbie and I'm kind of stuck here. I'm making this search below.

The problem is that I can filter out categories with the select option. But I can't search only in the selected category. The search always looks for all div's with .visible attached. I know I must remove the .visible from the div's that don't belong to the selected category but I'm out of ideas.

Can someone help me here?

link to a fiddle 

 $("#searchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#searchFilterDiv div.CompanyDirectoryItem.visible").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
    console.log(value);
});



//Filter studyFields
$('select#studyselector').change(function() {
	var filter = $(this).val()
	filterList(filter);
   console.log(filter);
});

//News filter function
function filterList(value) {
	var list = $("#searchFilterDiv div.CompanyDirectoryItem.search-results-box-item");
	$(list).fadeOut("fast");
   

		$("#searchFilterDiv").find("div.CompanyDirectoryItem.search-results-box-item[data-name*=" + value + "]").addClass('visible').each(function (i) {
			$(this).delay(200).slideDown("fast");
		});
	//}
}

  if($('.CompanyDirectoryItem.visible').length===0){
        $('.error').show();
      }else{
        $('.error').hide();
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>sortdata</h2>


<input id="searchInput" type="text" value="" placeholder="search"/>



<select name="studyselector" id="studyselector">
	<option value="All">All news</option>
	<option value="Cat1">Category 1</option>
	<option value="Cat2">Category 2</option>
	<option value="Cat3">Category 3</option>
  <option value="Cat4">Category 4</option>
  <option value="Cat5">Category 5</option>
  <option value="Cat6">Category 6</option>
  <option value="Cat7">Category 7</option>
</select> 
<hr />
<div id="searchFilterDiv">
  <div class="CompanyDirectoryItem search-results-box-item" data-name=" All, Cat1">
	<div class="thumb">
		<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
	</div>
	<div class="news-txt">
		<h3><a href="">A news title1</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	</div>
</div>
<div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat2, Cat5">
	<div class="thumb">
		<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
	</div>
	<div class="news-txt">
		<h3><a href="">A news title2</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	</div>
</div>
<div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat3">
	<div class="thumb">
		<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
	</div>
	<div class="news-txt">
		<h3><a href="">A news title3</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	</div>
    </div>
    
    <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat4">
	<div class="thumb">
		<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
	</div>
	<div class="news-txt">
		<h3><a href="">A news title4</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	</div>
    </div>
    
    <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat5">
	<div class="thumb">
		<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
	</div>
	<div class="news-txt">
		<h3><a href="">A news title5</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	</div>
    </div>
    
    <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat6, Cat1">
	<div class="thumb">
		<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
	</div>
	<div class="news-txt">
		<h3><a href="">A news title6</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	</div>
    </div>
  
  
  <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat7, Cat3">
	<div class="thumb">
		<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
	</div>
	<div class="news-txt">
		<h3><a href="">A news title7+3</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	</div>
    </div>
   
     <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat7">
	<div class="thumb">
		<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
	</div>
	<div class="news-txt">
		<h3><a href="">A news title7</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	</div>
    </div>

</div>

Upvotes: 0

Views: 113

Answers (2)

Musilix
Musilix

Reputation: 345

You could change your onkeyup event listener so that it will get all divs with news content and then compare their contents to whatever is entered in the search box. It can check to see if the search appears in a divs news content with the .search() method and a newly created RegExp object:

EDIT: in order to use RegExp with your news content, you must handle special characters as well, so I added a new line to replace special characters such as "+" with "+" and etc.

//changed your onkeyup listener to use regexp
//on all divs which contain news content e.g.
//divs with class news-txt
$("#searchInput").on("keyup", function() {
  var value = $(this).val().toLowerCase();
  //in order to use RegExp, you must escape special characters, such as the "+" you use in one title
  value = value.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');

  $('.news-txt').each(function() {
    if ($(this).text().search(new RegExp(value, "i")) < 0) {
      $(this).parent().hide();
    } else {
      $(this).parent().show();
    }
  });
});

//Filter studyFields
$('select#studyselector').change(function() {

  var filter = $(this).val()
  filterList(filter);
  console.log(filter);
});

//News filter function
function filterList(value) {
  var list = $("#searchFilterDiv div.CompanyDirectoryItem.search-results-box-item");
  $(list).fadeOut("fast");


  $("#searchFilterDiv").find("div.CompanyDirectoryItem.search-results-box-item[data-name*=" + value + "]").addClass('visible').each(function(i) {
    $(this).delay(200).slideDown("fast");
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>sortdata</h2>


<input id="searchInput" type="text" value="" placeholder="search" />



<select name="studyselector" id="studyselector">
  <option value="All">All news</option>
  <option value="Cat1">Category 1</option>
  <option value="Cat2">Category 2</option>
  <option value="Cat3">Category 3</option>
  <option value="Cat4">Category 4</option>
  <option value="Cat5">Category 5</option>
  <option value="Cat6">Category 6</option>
  <option value="Cat7">Category 7</option>
</select>
<hr />
<div id="searchFilterDiv">
  <div class="CompanyDirectoryItem search-results-box-item" data-name=" All, Cat1">
    <div class="thumb">
      <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
    </div>
    <div class="news-txt">
      <h3><a href="">A news title1</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
    </div>
  </div>
  <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat2, Cat5">
    <div class="thumb">
      <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
    </div>
    <div class="news-txt">
      <h3><a href="">A news title2</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
    </div>
  </div>
  <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat3">
    <div class="thumb">
      <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
    </div>
    <div class="news-txt">
      <h3><a href="">A news title3</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
    </div>
  </div>

  <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat4">
    <div class="thumb">
      <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
    </div>
    <div class="news-txt">
      <h3><a href="">A news title4</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
    </div>
  </div>

  <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat5">
    <div class="thumb">
      <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
    </div>
    <div class="news-txt">
      <h3><a href="">A news title5</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
    </div>
  </div>

  <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat6, Cat1">
    <div class="thumb">
      <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
    </div>
    <div class="news-txt">
      <h3><a href="">A news title6</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
    </div>
  </div>


  <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat7, Cat3">
    <div class="thumb">
      <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
    </div>
    <div class="news-txt">
      <h3><a href="">A news title7+3</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
    </div>
  </div>

  <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat7">
    <div class="thumb">
      <img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
    </div>
    <div class="news-txt">
      <h3><a href="">A news title7</a></h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
    </div>
  </div>

</div>

Upvotes: 0

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

If I got your point .. You just need to remove the visible class?!!

You can remove the visible class from all search-results-box-item then use .filter("[data-name*=" + value + "]") to filter by data-name attribute like this 

$("#searchFilterDiv").find("div.CompanyDirectoryItem.search-results-box-item").removeClass('visible').filter("[data-name*=" + value + "]").addClass('visible').each.....`


$("#searchInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#searchFilterDiv div.CompanyDirectoryItem.visible").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
    console.log(value);
});



//Filter studyFields
$('select#studyselector').change(function() {
	var filter = $(this).val()
	filterList(filter);
   console.log(filter);
});

//News filter function
function filterList(value) {
	var list = $("#searchFilterDiv div.CompanyDirectoryItem.search-results-box-item");
	$(list).fadeOut("fast");
   

		$("#searchFilterDiv").find("div.CompanyDirectoryItem.search-results-box-item").removeClass('visible').filter("[data-name*=" + value + "]").addClass('visible').each(function (i) {
			$(this).delay(200).slideDown("fast");
		});
	//}
}

  if($('.CompanyDirectoryItem.visible').length===0){
        $('.error').show();
      }else{
        $('.error').hide();
      }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>sortdata</h2>


<input id="searchInput" type="text" value="" placeholder="search"/>



<select name="studyselector" id="studyselector">
	<option value="All">All news</option>
	<option value="Cat1">Category 1</option>
	<option value="Cat2">Category 2</option>
	<option value="Cat3">Category 3</option>
  <option value="Cat4">Category 4</option>
  <option value="Cat5">Category 5</option>
  <option value="Cat6">Category 6</option>
  <option value="Cat7">Category 7</option>
</select> 
<hr />
<div id="searchFilterDiv">
  <div class="CompanyDirectoryItem search-results-box-item" data-name=" All, Cat1">
	<div class="thumb">
		<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
	</div>
	<div class="news-txt">
		<h3><a href="">A news title1</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	</div>
</div>
<div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat2, Cat5">
	<div class="thumb">
		<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
	</div>
	<div class="news-txt">
		<h3><a href="">A news title2</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	</div>
</div>
<div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat3">
	<div class="thumb">
		<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
	</div>
	<div class="news-txt">
		<h3><a href="">A news title3</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	</div>
    </div>
    
    <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat4">
	<div class="thumb">
		<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
	</div>
	<div class="news-txt">
		<h3><a href="">A news title4</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	</div>
    </div>
    
    <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat5">
	<div class="thumb">
		<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
	</div>
	<div class="news-txt">
		<h3><a href="">A news title5</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	</div>
    </div>
    
    <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat6, Cat1">
	<div class="thumb">
		<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
	</div>
	<div class="news-txt">
		<h3><a href="">A news title6</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	</div>
    </div>
  
  
  <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat7, Cat3">
	<div class="thumb">
		<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
	</div>
	<div class="news-txt">
		<h3><a href="">A news title7+3</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	</div>
    </div>
   
     <div class="CompanyDirectoryItem search-results-box-item" data-name="All, Cat7">
	<div class="thumb">
		<img alt="Our ALT text here" title="Our title here" src="http://placehold.it/150x150">
	</div>
	<div class="news-txt">
		<h3><a href="">A news title7</a></h3>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua...</p>
	</div>
    </div>

</div>

Upvotes: 2

Related Questions