Skip to content

Instantly share code, notes, and snippets.

@pauldenato

pauldenato/liveSearch.html

Last active February 11, 2016 15:19
Show Gist options
  • Save pauldenato/edb46b306f6753f1e19f to your computer and use it in GitHub Desktop.
Save pauldenato/edb46b306f6753f1e19f to your computer and use it in GitHub Desktop.
Download ZIP
JQuery Live Search - With Bootstrap Form
Raw
liveSearch.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jquery Live Search</title>
<!--JQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha256-7s5uDGW3AHqw6xtJmNNtr+OBRJUlgkNJEo78P4b0yRw= sha512-nNo+yCHEyn0smMxSswnf/OnX6/KwJuZTlNZBjauKhTK0c+zT+q5JOCx0UFhXQ6rJR9jg6Es8gPuD2uZcYDLqSw==" crossorigin="anonymous">
<!-- Bootstrap Javascript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha256-KXn5puMvxCw+dAYznun+drMdG1IFl3agK0p/pqT9KAo= sha512-2e8qq0ETcfWRI4HJBzQiA3UoyFk6tbNyG+qSaIBZLyW9Xf3sWZHN/lxe9fTh1U45DpPf07yj94KsUHHWe4Yk1A==" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#filter").keyup(function(){
// Retrieve the input field text and reset the count to zero
var filter = $(this).val(), count = 0;
// get the list to be searched
var items = $(".onlineText li");
//get the total lenght for counting later
var totalItems = items.length;
// Loop through the comment list
$(".onlineText li").each(function(){
// If the list item does not contain the text phrase fade it out
if ($(this).text().search(new RegExp(filter, "i")) < 0) {
$(this).fadeOut();
// Show the list item if the phrase matches and increase the count by 1
} else {
$(this).show();
count++;
}
});
// Update the count
var numberItems = count;
//begin if to change colors for input group
if(count == totalItems){
//If the count matches the total items in the list. Set the text to 0 and remove Danger and Success Classes
$("#filter-count").parent().removeClass('btn-success').removeClass('btn-danger');
$("#filter-count").text(0);
}else if(count == 0){
//If the count matches 0 in the list. Set the text to 0 and Add Danger and Remove Success Class
$("#filter-count").parent().removeClass('btn-success').addClass('btn-danger');
$("#filter-count").text(0);
}else{
//If the count is in between 0 and Total items in the list. Set the text to the counter and Add Success and Remove Danger Class
$("#filter-count").parent().addClass('btn-success').removeClass('btn-danger');
$("#filter-count").text(count);
}
});
});
</script>
</head>
<body>
<div class="container">
<div class="row">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="mg-clear tc-white">Live Search</h3>
<!--Online Texts-->
</div>
<div class="panel-body">
<div class="row">
<form action="" class="" id="live-search" method="post">
<div class="col-sm-12">
<div class="input-group input-group-lg">
<!--<label class="control-label sr-only" for="filter">Title Search </label>-->
<input class="form-control input-lg" id="filter" type="text" value="" placeholder="Search..." />
<span class="input-group-btn">
<button class="btn btn-disabled" type="button">Matches <span id="filter-count" class="badge">0</span></button>
</span> </div>
</div>
</form>
</div>
<hr />
<div class="col-sm-6 onlineText">
<ul>
<a id="Names" title="Names of Boys and Girls">
<h4>Names</h4>
</a>
<li>Alex Arden</li>
<li>Vivienne Vitiello</li>
<li>Rodrick Ridder</li>
<li>Kimiko Kepley</li>
<li>Maryln Mitchener</li>
<li>Halina Hovland</li>
<li>Bernetta Bermejo</li>
<li>Peter Plamondon</li>
<li>Lanora Laracuente</li>
<li>Wilson Whipkey</li>
<li>Brigida Baur</li>
<li>Vincenzo Vibbert</li>
<li>Mickey Menefee</li>
<li>Eleonor Eyman</li>
<li>Angelica Arrieta</li>
<li>Minerva Mangano</li>
<li>Pamila Pouncey</li>
<li>Eileen Erdman</li>
<li>Jerlene Joslyn</li>
<li>Lesley Luce</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment