How can i get the number of visible items from a filtered list using jquery?

Question

I have a list of 4 divs and an input field for filtering the list using jquery. What i need is to display/count the number of the filtered results on "keyup" function . I am using the "size" function to get the total number of the results.

However i 'm not getting the right number of results and i can't fix it.

Here's my code:

var langMap = {}

$('#search-stores-box').keyup(function(){

	var valThis = $(this).val().toLowerCase();
	var filteredWord = getLatinWord(valThis);
    
    var count = $('.storesList  .store-block').size() - $('.storesList .hidden-store').size();
    $('#count').text(count);

   
	if(filteredWord == ""){
  

		$('.storesList .store-block').show();
		$('.storesList .store-block').removeClass('hidden-store');    
    
	} else {
  
		$('.storesList .store-block').each(function(){
			$('.storesList .store-block').addClass('hidden-store'); 
     
			var text = $(this).text().toLowerCase();
			text = getLatinWord(text);
			(text.indexOf(filteredWord) > -1 ) ? $(this).show() : $(this).hide();
		  
		});
	}
   });
      
   function getLatinWord(word){
	 return word.split('').map(function(character){
	  if (langMap[character]) {
	  return langMap[character];
	  }
	  return character;
	  }).join('');
   }

.results-box {
  margin-bottom:10px;
  overflow:hidden;
  display:inline-block;
}

.search-area {margin-bottom:10px;}

#count {display:inline-block;}

.store-block {
  width:80%;
  margin-bottom:10px;
  padding:5px;
  background:#e5e5e5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="results-box">Number of stores:
<div id="count"></div>
</div>

<div class="search-area">
<input placeholder="Type a store name..." id="search-stores-box" type="text" />
</div>	

<div class="storesList">
<div class="store-block">Apple Store</div>
<div class="store-block">Microsoft Store</div>
<div class="store-block">Motorola Store</div>
<div class="store-block">Nokia Store</div>
</div>

JSFIDDLE HERE

It took me a while to realize that your code adds the class hidden-store to all stores, no matter if the div will be visible or not. So $('.hidden-store').size() always is 4. That's why the calculation does not work. — Hans Dash
– Hans Dash, Commented Sep 7, 2018 at 12:48

Bhushan Kawadkar · Accepted Answer · 2018-09-07 12:44:05Z

1

you can get count using :visible

var count = $('.storesList  .store-block:visible').length;
$('#count').text(count);

OR you can check store-blobk with no hidden-store class

var count = $('.storesList  .store-block:not(.hidden-store)').length;
$('#count').text(count);

check below working code snippet

var langMap = {}
$('#count').text($('.storesList  .store-block:visible').length);
$('#search-stores-box').keyup(function(){

	var valThis = $(this).val().toLowerCase();
	var filteredWord = getLatinWord(valThis);

   
	if(filteredWord == ""){
  

		$('.storesList .store-block').show();
		$('.storesList .store-block').removeClass('hidden-store');    
    
	} else {
  
		$('.storesList .store-block').each(function(){
			$('.storesList .store-block').addClass('hidden-store'); 
     
			var text = $(this).text().toLowerCase();
			text = getLatinWord(text);
			(text.indexOf(filteredWord) > -1 ) ? $(this).show() : $(this).hide();
		  
		});
	}
     var count = $('.storesList  .store-block:visible').length;
    $('#count').text(count);
   });
      
   function getLatinWord(word){
	 return word.split('').map(function(character){
	  if (langMap[character]) {
	  return langMap[character];
	  }
	  return character;
	  }).join('');
   }

.results-box {
  margin-bottom:10px;
  overflow:hidden;
  display:inline-block;
}

.search-area {margin-bottom:10px;}

#count {display:inline-block;}

.store-block {
  width:80%;
  margin-bottom:10px;
  padding:5px;
  background:#e5e5e5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="results-box">Number of stores:
<div id="count"></div>
</div>

<div class="search-area">
<input placeholder="Type a store name..." id="search-stores-box" type="text" />
</div>	

<div class="storesList">
<div class="store-block">Apple Store</div>
<div class="store-block">Microsoft Store</div>
<div class="store-block">Motorola Store</div>
<div class="store-block">Nokia Store</div>
</div>

edited Sep 7, 2018 at 12:44

answered Sep 7, 2018 at 12:23

Bhushan Kawadkar

28.6k5 gold badges39 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Designer Over a year ago

Thanks for commenting but doesn't work. :( If you check my code above i need the search results number to get updated on "keyup" function.

Bhushan Kawadkar Over a year ago

it should work in keyup function, just replace your two line code to read count with my code. Please check updated post with code snippet

Bhushan Kawadkar Over a year ago

one correction, this line should be called at the end of keyup event handler otherwise it will not give you correct count

Designer Over a year ago

Thanks. It worked perfect. I ll accept your answer asap. Just one last question. If you load the code it shows no results until you start typing in the input field. How i display the total number of results before the user start typing in the input field ?? Once again thanks for your effort.

Bhushan Kawadkar Over a year ago

you can apply count logic once page load. Put it just before keup event handler. see my updated post

|

Collectives™ on Stack Overflow

How can i get the number of visible items from a filtered list using jquery?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related