How to filter list values using bootstrap and jquery

Manideepgoud
Posted by Manideepgoud under Bootstrap category on | Points: 40 | Views : 670
In this code we are filtering list values
<div class="category filter-menu">
<p class="drop1">Category <span class="caret"></span></p>
<input type="text"id="myInput" class="form-control filter-search" placeholder="Search Category">
<ul class="PLP-category-items1" id="mylabel1">
<li class="checkbox"><label><input type="checkbox" value="">&nbsp;&nbsp;Cardless Phones<span class="badge-right">(12)</span></label></li>
<li class="checkbox"><label><input type="checkbox" value="">&nbsp;&nbsp;Mobile Accessories<span class="badge-right">(165)</span></label></li>
<li class="checkbox"><label><input type="checkbox" value="">&nbsp;&nbsp;Smart Brands<span class="badge-right">(11)</span></label></li>
<li class="checkbox"><label><input type="checkbox" value="">&nbsp;&nbsp;Smart Phones<span class="badge-right">(184)</span></label></li>
<li class="checkbox"><label><input type="checkbox" value="">&nbsp;&nbsp;Smart Watches<span class="badge-right">(51)</span></label></li>
<li class="checkbox"><label><input type="checkbox" value="">&nbsp;&nbsp;Tablet<span class="badge-right">(39)</span></label></li>
<li class="checkbox"><label><input type="checkbox" value="">&nbsp;&nbsp;Tablet Accessories<span class="badge-right">(9)</span></label></li>
<ul>
</div>

<script>
$(document).ready(function(){
$(".filter-search").on("keyup", function() {
var value = $(this).val().toLowerCase();
$(this).closest('.filter-menu').find('ul').find('li').filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1);
});
});
});
</script>

In this above code we are filtering the li values which are in div section.

Comments or Responses

Posted by: Annaeverson on: 8/7/2018 Level:Starter | Status: [Member] | Points: 10
nice one

Login to post response