Home Web Development JavaScript jQuery Search Filter With CSS Animation | Simple Search Filtering

jQuery Search Filter With CSS Animation | Simple Search Filtering

September 29, 2019

6895

How we can create a search form for filter out content according to query using JavaScript? Solution: See this jQuery Search Filter With CSS Animation.

Previously I have shared a JavaScript Tabel Search Filter, this also similar like that but it is with jQuery. Basically, the search filter is a program for search a specific word or sentence in between the long paragraph. The program will works on every kind of elements, paragraph, list, table, etc you just have to put ID and class integration.

Today you will learn to create Simple Search Filtering. There has a list of coding languages and search input bar above the list, when you will put any alphabet or word then only matching items will visible. And when it will filtering out items according to query there is cool animation using CSS.

So, Today I am sharing jQuery Search Filter With CSS Animation. This program is created using jQuery and also with another library jQuery UI. These libraries is based on JS that’s why I am putting this in JavaScript category. You can use this program on your website for filtering content, it will help your user to get the right content.

If you are thinking now how this search filter actually is, then see the preview given below.

Preview Of Simple Search Filtering

Live Demo

Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.

jQuery Search Filter With CSS Animation Source Code

Before sharing source code, let’s talk about it. First I have created search input using HTML <input type="text"> command and created a list for storing code names using HTML <ul> & <li> tags. Also, I have created some elements for showing result count, zero results, heading, etc. All the files like CSS JS I have linked inside the HTML file.

Now using CSS, I have placed all the elements in the right place as you can see in the preview. There is a hover effect and many animation effects using CSS transition property. Also, I have done lots of basic things using CSS. There I have used jQuery UI CSS library to creating elements easily (get). jQuery handling here the main feature of searching.

jQuery first fetching all the content list and the search input, then it reads the search query and filtering out the result. Ther jQuery playing with a class which is hidden, if result not matching the search query then jQuery ads the remove class inside the item. Left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating this program you have to create 3 files for that. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>jQuery Search Filter | Webdevtrick.com</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans|Maven+Pro:500' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
  
  <h1>jQuery Search Filter</h1>

 <section class="wrap">

   <label for="search-text">Search in 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">HTML</li>
  <li class="in">CSS</li>
  <li class="in">JavaScript</li>
  <li class="in">PHP</li>
  <li class="in">Node JS</li>
  <li class="in">React JS</li>
  <li class="in">Angular JS</li>
  <li class="in">Python</li>
  <li class="in">Kotlin</li>
  <span class="empty-item">no results</span>
</ul>
   </section>
   


<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>jQuery Search Filter | Webdevtrick.com</title>

</head>

<body>

<h1>jQuery Search Filter</h1>

<label for="search-text">Search in the list</label>

<li class="in">JavaScript</li>

<li class="in">React JS</li>

<li class="in">Angular JS</li>

<li class="in">Python</li>

<li class="in">Kotlin</li>

<span class="empty-item">no results</span>

</ul>

</section>

</body>

</html>

style.css

Create a CSS file named ‘style.css‘ and put these codes given here.

/* Code By Webdevtrick ( https://webdevtrick.com ) */
* {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
    box-sizing: border-box; 
  }
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;
}
.info {
  float:left;
  width:60%;
  margin:2em 20%;
  padding:2em 0;
  background:#f9f9f9;
  border-left:5px solid #003842;
  padding:10px 20px;
}
.wrap {
  float:left;
  width:40%;
  margin:2em 30%;
  padding:2em 0;
}
p {
  text-align:left;
  font-size:1em;
}
.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:'codes';
  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 #ff4646;
  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;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

/* Code By Webdevtrick ( https://webdevtrick.com ) */

* {

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

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;

}

.info {

float:left;

width:60%;

margin:2em 20%;

padding:2em 0;

background:#f9f9f9;

border-left:5px solid #003842;

padding:10px 20px;

}

.wrap {

float:left;

width:40%;

margin:2em 30%;

padding:2em 0;

}

p {

text-align:left;

font-size:1em;

}

.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:'codes';

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 #ff4646;

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;

}

function.js

The final step, Create a JavaScript file name ‘function.js‘ and put the codes.

// Code By Webdevtrick ( https://webdevtrick.com )
$(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');
    }
    
  });

});

// Code By Webdevtrick ( https://webdevtrick.com )

$(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');

}

});

That’s It. Now you have successfully created jQuery Search Filter With CSS Animation, Simple Search Filtering. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

2 COMMENTS

Aditya May 24, 2020 At 11:06 am

Sir, can I talk to you related to this topic.

Reply
Patrik November 7, 2021 At 1:42 pm

Thank you very much, very well explained and easily to implement. Exactly what I was looking for!

Reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY

Preview Of Simple Search Filtering

jQuery Search Filter With CSS Animation Source Code

2 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

POPULAR CATEGORY