<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href='https://fonts.googleapis.com/css?family=Open+Sans|Maven+Pro:500' rel='stylesheet' type='text/css'>
<div class="deco topdeco">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<h1>Basic jQuery search/filter</h1>
<h3>
a quick and dirty jquery search
</h3>
<section class="list-wrap">
<label for="search-text">Search the list</label>
<input type="text" id="search-text" placeholder="search" class="search-box">
<span class="list-count"></span>
<ul id="list">
<li class="in">Apple pie</li>
<li class="in">Pumpkin pie</li>
<li class="in">Banana-creme pie</li>
<li class="in">Peach-blackberry cobbler</li>
<li class="in">Chocolate-strawberry torte</li>
<li class="in">Chocolate-zucchini cake</li>
<li class="in">Anything involving chocolate and mint</li>
<li class="in">Red-velvet cake</li>
<li class="in">Anything involving fruits that aren't cherries</li>
<span class="empty-item">no results</span>
</ul>
</section>
<p class="cta">
Read more at <br /> <a id="link" href="http://www.robsawyer.me/blog/2013/07/10/lightweight-jquery-searchfilter-tutorial/">robsawyer.me/blog</a>
</p>
/* this declares a better box model */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.list-wrap label {
float:left;
color:#00BDE8;
}
.search-box {
float:left;
clear:left;
width:70%;
padding:0.4em;
font-size:1em;
color:#555;
}
.list-count {
float:left;
text-align:center;
width:30%;
padding:0.5em;
color:#ddd;
}
li {
transition-property: margin, background-color, border-color;
transition-duration: .4s, .2s, .2s;
transition-timing-function: ease-in-out, ease, ease;
}
.empty-item {
transition-property: opacity;
transition-duration: 0s;
transition-delay: 0s;
transition-timing-function: ease;
}
.empty .empty-item {
transition-property: opacity;
transition-duration: .2s;
transition-delay: .3s;
transition-timing-function: ease;
}
.hiding {
margin-left:-100%;
opacity:0.5;
}
.hidden {
display:none;
}
ul {
float:left;
width:100%;
margin:2em 0;
padding:0;
position:relative;
}
ul:before {
content:'desserts';
position:absolute;
left:-2.8em;
font-size:3em;
text-align:right;
top:1.5em;
color:#ededed;
font-weight:bold;
font-family: 'Maven Pro', sans-serif;
transform:rotate(-90deg);
}
li {
float:left;
clear:left;
width:100%;
margin:0.2em 0;
padding:0.5em 0.8em;
list-style:none;
background-color:#f2f2f2;
border-left:5px solid #003842;
cursor:pointer;
color:#333;
position:relative;
z-index:2;
}
li:hover {
background-color:#f9f9f9;
border-color:#00BDE8;
}
.empty-item {
background:#fff;
color:#ddd;
margin:0.2em 0;
padding:0.5em 0.8em;
font-style:italic;
border:none;
text-align:center;
visibility:hidden;
opacity:0;
float:left;
clear:left;
width:100%;
}
.empty .empty-item {
opacity:1;
visibility:visible;
}
/*
The following are styles purely for the surroundings
*/
body {
background-color:#fff;
font-family:'Open Sans', sans-serif;
margin:0;
padding:0;
font-size:1em;
}
a {color:#00BDE8;}
h1 {
font-size:2.6em;
margin:0;
padding-top:1.5em;
text-align:center;
font-family: 'Maven Pro', sans-serif;
}
h3 {
margin:0 0 2em;
text-align:center;
font-weight:normal;
font-family: georgia, times;
font-style:italic;
color:#777;
font-size:1em;
}
.info {
float:left;
width:60%;
margin:2em 20%;
padding:2em 0;
background:#f9f9f9;
border-left:5px solid #003842;
padding:10px 20px;
}
.list-wrap {
float:left;
width:40%;
margin:2em 30%;
padding:2em 0;
}
p {
text-align:left;
font-size:1em;
}
.cta {
float:left;
width:100%;
text-align:center;
color:#999;
font-family:georgia, times;
font-style:italic;
margin:2em 0;
}
.cta a {
font-size:1.5em;
font-style:normal;
font-family: 'Maven Pro', sans-serif;
text-decoration:none;
line-height:1.5em;
}
.topdeco {
float:left;
width:100%;
height:10px;
position:fixed;
z-index:10;
}
.topdeco span {
float:left;
width:25%;
height:100%;
}
.deco span:nth-child(1) {
background:#FF8220;
}
.deco span:nth-child(2) {
background:#000;
}
.deco span:nth-child(3) {
background:#FFA00A;
}
.deco span:nth-child(4) {
background:#00BDE8;
}
$(document).ready(function() {
var jobCount = $('#list .in').length;
$('.list-count').text(jobCount + ' items');
$("#search-text").keyup(function () {
//$(this).addClass('hidden');
var searchTerm = $("#search-text").val();
var listItem = $('#list').children('li');
var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
//extends :contains to be case insensitive
$.extend($.expr[':'], {
'containsi': function(elem, i, match, array)
{
return (elem.textContent || elem.innerText || '').toLowerCase()
.indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
$("#list li").not(":containsi('" + searchSplit + "')").each(function(e) {
$(this).addClass('hiding out').removeClass('in');
setTimeout(function() {
$('.out').addClass('hidden');
}, 300);
});
$("#list li:containsi('" + searchSplit + "')").each(function(e) {
$(this).removeClass('hidden out').addClass('in');
setTimeout(function() {
$('.in').removeClass('hiding');
}, 1);
});
var jobCount = $('#list .in').length;
$('.list-count').text(jobCount + ' items');
//shows empty state text when no jobs found
if(jobCount == '0') {
$('#list').addClass('empty');
}
else {
$('#list').removeClass('empty');
}
});
/*
An extra! This function implements
jQuery autocomplete in the searchbox.
Uncomment to use :)
function searchList() {
//array of list items
var listArray = [];
$("#list li").each(function() {
var listText = $(this).text().trim();
listArray.push(listText);
});
$('#search-text').autocomplete({
source: listArray
});
}
searchList();
*/
});
