Search - Filter List Group Items By Search
HTML
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<input class="form-control" id="txtSearch" type="text">
<ul class="list-group">
<li class="list-group-item">Test</li>
<li class="list-group-item">Jimmy</li>
<li class="list-group-item">Weight</li>
<li class="list-group-item">Jail</li>
<li class="list-group-item">Teacher</li>
</ul>
CSS
.list-group-item{
border: 1px solid black;
}
.list-group-item:last-child{
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.list-group-item:first-child{
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
JavaScript
$("#txtSearch").on('keyup', function() {
var search = $(this).val().toLowerCase();
//Go through each list item and hide if not match search
$(".list-group-item").each(function() {
if ($(this).html().toLowerCase().indexOf(search) != -1) {
$(this).show();
}
else {
$(this).hide();
}
});
$(".list-group-item:visible").each(function(index) {
if(index == 0){
$(this).css("border-top-left-radius", "10px");
$(this).css("border-top-right-radius", "10px");
}
if(index == $(".list-group-item:visible").length - 1){
$(this).css("border-bottom-left-radius", "10px");
$(this).css("border-bottom-right-radius", "10px");
}
});
});