Bootstrap Snippet filter jquery using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* 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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$(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);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"filter jquery"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"filter jquery" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"filter jquery"
Bootstrap 3.0.0 Snippet by evarevirus