I am able to filter out data, now I am trying to hide a div if searched text doesn't exist. Is there any way to do it.
<input type="text" placeholder="Search" class=".bar-input">
<div class="xyz"> hide me if searched value doesn't match</div>
<ul class=".myUL">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
$('.bar-input').on('keyup', function() {
var input_val = $('.bar-input').val();
var tags = $('.myUL > li');
var count = tags.length;
for (i = 0; i < count; i++) {
if (!input_val || tags[i].textContent.toLowerCase().indexOf(input_val) > -1) {
tags[i].style['display'] = 'block';
} else {
tags[i].style['display'] = 'none';
}
}
});
Here, accept if this work for you.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" placeholder="Search" class="bar-input">
<div class="xyz"> hide me if searched value doesn't match</div>
<ul class="myUL">
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>
<li>five</li>
<li>six</li>
</ul>
<script>
$('.bar-input').on('keyup', function() {
var input_val = $('.bar-input').val();
var tags = $('.myUL > li');
var count = tags.length;
var match_cnt = 0;
for (i = 0; i < count; i++) {
if (!input_val || tags[i].textContent.toLowerCase().indexOf(input_val) > -1) {
tags[i].style['display'] = 'block';
match_cnt++;
} else {
tags[i].style['display'] = 'none';
}
}
if(match_cnt<1) {
$('.xyz').hide();
} else {
$('.xyz').show();
}
});
</script>