Home Web Development JavaScript jQuery Search List With Bootstrap Layout | Search List Filter Program

jQuery Search List With Bootstrap Layout | Search List Filter Program

May 4, 2020

10912

How we can create a search filter for list items using JS? Solution: See this jQuery Search List With Bootstrap Layout | Search List Filter Program.

Previously I have shared a search filter example, this is also similar to that but it is fast and with a smooth fade in and out animations. Basically, a search filter‘s work is filtering out the matching query which is given by the user. And this is important in every condition: on website, web app, mobile app, or any desktop software. Suppose a webpage contains a long list or table and you have to find a specific item, then it will very helpful.

Today you will learn to create a Search List Filter Program. Basically, there is a list with all country names and header section with title and search input. When you will click on the input and put any character then the list items will be filtering out according to the given query. During the filter items, there is cool fade-in and fade-out animation effects. This whole process is pretty cool and fast.

So, Today I am sharing jQuery Search List With Bootstrap Layout. There I have used bootstrap to create a responsive layout, CSS for styling and jQuery for functioning. For the font styles and icon placement, I have used google fonts service. There is a shortcode for filter contents easily, you can use it on your website. This search program filters content without refreshing like our control+F command.

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

Preview Of List Filter Program

See this video preview to getting an idea of how this list filter program looks like.

Live Demo

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

jQuery Search List Source Code

Before sharing source code, let’s talk about it. First I have created the container div and create the whole layout according to Bootstrap’s grid layout. There I have created a list using HTML <ul> & <li> commands and placed all countries names. Also, I have placed a heading title, search input and search icon above the list. In the HTML file, I have linked other files like CSS, JS, and JQuery CDN link.

Now using CSS I have placed all the items in the right place, as you can see in the preview. This program is based on the bootstrap layout that’s why there is less custom CSS. With CSS I gave basic values like fonts, padding, margin, color, etc to all the elements. There I have used CSS @keyframe commands to create fade-in and fade-out animation effects.

JQuery handling here the search or filter function in this program. I have used jQuery indexOf(searchText) for search and filter out contents according to the user’s query. There I have used JS if{} else{} statements to declare the which animation effect will active on different conditions.

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. First file for HTML, second for CSS, and third for JavaScript. Follow the steps to creating this program without any error.

index.html

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

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Search By list  jQuey | Webdevtrick.com</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900,100' rel='stylesheet' type='text/css'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel="stylesheet" href="style.css">

</head>
<body>

<div class="container">

  <div class="row">
    <div class="col-md-12 tv-search-tm">
      <div class="row">
        <div class="col-md-4">
          <p class="tv-search-title-tm">Service Availability</p>
        </div>
        <div class="col-md-8 tv-search-input-container-tm">
          <input type="text" name="" value="" class="tv-search-input-tm" placeholder="Search a Country..." />  
          <i class="material-icons">search</i>
        </div>
      </div>
       
    </div>
    <div class="col-md-12 tv-search-results-tm">
      <div class="tv-columns-tm">
        <ul class="tv-search-result-ul-tm">
          <li>Argentina</li>
          <li>Armenian</li>
          <li>Australia</li>
          <li>Austria</li>
          <li>Bahrain</li>
          <li>Bangladesh</li>
          <li>Belgium</li>
          <li>N/A</li>
          <li>Bermuda</li>
          <li>Byelorussia</li>
          <li>Bolivia</li>
          <li>Brazil</li>
          <li>Brunei</li>
          <li>Canada</li>
          <li>Cape Verde Islands</li>
          <li>Chile</li>
          <li>China</li>
          <li>Chipre</li>
          <li>Colombia</li>
          <li>N/A</li>
          <li>Croatia</li>
          <li>Czech Republic</li>
          <li>Denmark</li>
          <li>Dominican Republic</li>
          <li>Ecuador</li>
          <li>Egypt</li>
          <li>El Salvador</li>
          <li>Estonia</li>
          <li>Fiji Islands</li>
          <li>Finland</li>
          <li>France</li>
          <li>Gambia</li>
          <li>Georgia</li>
          <li>Germany</li>
          <li>Ghana</li>
          <li>Greece</li>
          <li>Guam</li>
          <li>Guatemala</li>
          <li>N/A</li>
          <li>Honduras</li>
          <li>Hong Kong</li>
          <li>Iceland</li>
          <li>India</li>
          <li>Indonesia</li>
          <li>Irak</li>
          <li>Ireland</li>
          <li>Israel</li>
          <li>Italy</li>
          <li>Japan</li>
          <li>Kazakhstan</li>
          <li>Kenya</li>
          <li>Lebanon</li>
          <li>Lithuania</li>
          <li>Luxembourg</li>
          <li>Macao</li>
          <li>Malaysia</li>
          <li>Malta</li>
          <li>Marshal</li>
          <li>Mexico</li>
          <li>Monaco</li>
          <li>Morocco</li>
          <li>Netherlands</li>
          <li>Netherlands Antilles</li>
          <li>New Zealand</li>
          <li>Nicaragua</li>
          <li>Norway</li>
          <li>Pakistan</li>
          <li>Panama</li>
          <li>Paraguay</li>
          <li>Peru </li>
          <li>Philippines</li>
          <li>Poland</li>
          <li>Portugal</li>
          <li>Puerto Rico</li>
          <li>Romania</li>
          <li>Rwanda</li>
          <li>Saipan</li>
          <li>Saudi Arabia</li>
          <li>Senegal</li>
          <li>Singapore</li>
          <li>Slovakia</li>
          <li>South Africa</li>
          <li>South Korea</li>
          <li>Spain</li>
          <li>Sri Lanka</li>
          <li>Sweden</li>
          <li>Swiss</li>
          <li>Syria</li>
          <li>Taiwan</li>
          <li>Thailand</li>
          <li>Trinidad &amp; Tobago</li>
          <li>Turkey</li>
          <li>Ukraine</li>
          <li>United Arab Emirates</li>
          <li>United Kingdom</li>
          <li>United States</li>
          <li>Uruguay</li>
          <li>USVI</li>
          <li>Uzbequistan</li>
          <li>Venezuela</li>
          <li>Zimbabwe</li>
        </ul>
      </div>
    </div>
  </div>

</div>

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

</body>
</html>

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

141

142

143

144

<!DOCTYPE html>

<head>

<title>Search By list jQuey | Webdevtrick.com</title>

</head>

<body>

<p class="tv-search-title-tm">Service Availability</p>

</div>

<i class="material-icons">search</i>

</div>

<li>Argentina</li>

<li>Armenian</li>

<li>Australia</li>

<li>Austria</li>

<li>Bahrain</li>

<li>Bangladesh</li>

<li>Belgium</li>

<li>Bermuda</li>

<li>Byelorussia</li>

<li>Bolivia</li>

<li>Brazil</li>

<li>Brunei</li>

<li>Canada</li>

<li>Cape Verde Islands</li>

<li>Chile</li>

<li>China</li>

<li>Chipre</li>

<li>Colombia</li>

<li>Croatia</li>

<li>Czech Republic</li>

<li>Denmark</li>

<li>Dominican Republic</li>

<li>Ecuador</li>

<li>Egypt</li>

<li>El Salvador</li>

<li>Estonia</li>

<li>Fiji Islands</li>

<li>Finland</li>

<li>France</li>

<li>Gambia</li>

<li>Georgia</li>

<li>Germany</li>

<li>Ghana</li>

<li>Greece</li>

<li>Guatemala</li>

<li>Honduras</li>

<li>Iceland</li>

<li>India</li>

<li>Indonesia</li>

<li>Ireland</li>

<li>Israel</li>

<li>Italy</li>

<li>Japan</li>

<li>Kazakhstan</li>

<li>Kenya</li>

<li>Lebanon</li>

<li>Lithuania</li>

<li>Luxembourg</li>

<li>Macao</li>

<li>Malaysia</li>

<li>Malta</li>

<li>Marshal</li>

<li>Mexico</li>

<li>Monaco</li>

<li>Morocco</li>

<li>Netherlands</li>

<li>Netherlands Antilles</li>

<li>New Zealand</li>

<li>Nicaragua</li>

<li>Norway</li>

<li>Pakistan</li>

<li>Panama</li>

<li>Paraguay</li>

<li>Philippines</li>

<li>Poland</li>

<li>Portugal</li>

<li>Puerto Rico</li>

<li>Romania</li>

<li>Rwanda</li>

<li>Saipan</li>

<li>Saudi Arabia</li>

<li>Senegal</li>

<li>Singapore</li>

<li>Slovakia</li>

<li>South Africa</li>

<li>South Korea</li>

<li>Spain</li>

<li>Sri Lanka</li>

<li>Sweden</li>

<li>Swiss</li>

<li>Syria</li>

<li>Taiwan</li>

<li>Thailand</li>

<li>Trinidad & Tobago</li>

<li>Turkey</li>

<li>Ukraine</li>

<li>United Arab Emirates</li>

<li>United Kingdom</li>

<li>United States</li>

<li>Uruguay</li>

<li>Uzbequistan</li>

<li>Venezuela</li>

<li>Zimbabwe</li>

</ul>

</div>

</body>

</html>

style.css

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

body {
  font-family: 'Roboto', sans-serif;
  font-weight:400;
}
*:focus {
    outline: none;
}
.tv-search-tm {
  border-bottom:3px solid #219ae2;
  padding-top:10px;
  padding-bottom:5x;
  margin-bottom:20px;
}
p.tv-search-title-tm {
  font-size:20px;
  font-weight:400;
  padding-top:7px;
  color:#219ae2;
}
.tv-search-tm i.material-icons {
  position:absolute;
  top:10px;
  right:15px;
  font-size:30px;
  color:#219ae2;
}
.tv-search-input-container-tm {
  padding-top:5px;
}

input.tv-search-input-tm {
  width:100%;
  border:none;
  font-size:20px;
  font-weight:300;
  color:#219ae2;
}
input.tv-search-input-tm::-webkit-input-placeholder {
   color: #aaaaaa;
}

input.tv-search-input-tm:-moz-placeholder { 
   color: #aaaaaa; 
}

input.tv-search-input-tm::-moz-placeholder {  
   color: #aaaaaa; 
}

input.tv-search-input-tm:-ms-input-placeholder {  
   color: #aaaaaa;
}
.tv-search-results-tm {
  width:100%;
}


.tv-columns-tm
{   
   -moz-column-width: 11.5em; 
    -webkit-column-width: 11.5em; 
    column-width: 11.5em;
}
.tv-columns-tm ul
{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.tv-columns-tm ul li {
  text-align:left;
}
.tv-columns-tm ul li:first-child
{
    margin-top:0px;
}
.tv-search-result-ul-tm .tv-in-tm {
  animation-name: fadeIn;
  animation-duration: 1s;

}
.tv-search-result-ul-tm .tv-out-tm {
  opacity:0;
  animation-name: fadeOut;
  animation-duration: 1s;
  height:0;
  overflow:hidden;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}
@keyframes fadeOut {
  from {
    opacity: 1;
     height:auto;
      overflow:hidden;
  }

  to {
    opacity: 0;
     
  }
}

100

101

102

103

104

105

106

107

108

109

body {

font-family: 'Roboto', sans-serif;

font-weight:400;

}

*:focus {

outline: none;

}

.tv-search-tm {

border-bottom:3px solid #219ae2;

padding-top:10px;

padding-bottom:5x;

margin-bottom:20px;

}

p.tv-search-title-tm {

font-size:20px;

font-weight:400;

padding-top:7px;

color:#219ae2;

}

.tv-search-tm i.material-icons {

position:absolute;

top:10px;

right:15px;

font-size:30px;

color:#219ae2;

}

.tv-search-input-container-tm {

padding-top:5px;

}

input.tv-search-input-tm {

width:100%;

border:none;

font-size:20px;

font-weight:300;

color:#219ae2;

}

input.tv-search-input-tm::-webkit-input-placeholder {

color: #aaaaaa;

}

input.tv-search-input-tm:-moz-placeholder {

color: #aaaaaa;

}

input.tv-search-input-tm::-moz-placeholder {

color: #aaaaaa;

}

input.tv-search-input-tm:-ms-input-placeholder {

color: #aaaaaa;

}

.tv-search-results-tm {

width:100%;

}

.tv-columns-tm

{

-moz-column-width: 11.5em;

-webkit-column-width: 11.5em;

column-width: 11.5em;

}

.tv-columns-tm ul

{

margin: 0;

padding: 0;

list-style-type: none;

}

.tv-columns-tm ul li {

text-align:left;

}

.tv-columns-tm ul li:first-child

{

margin-top:0px;

}

.tv-search-result-ul-tm .tv-in-tm {

animation-name: fadeIn;

animation-duration: 1s;

}

.tv-search-result-ul-tm .tv-out-tm {

opacity:0;

animation-name: fadeOut;

animation-duration: 1s;

height:0;

overflow:hidden;

}

@keyframes fadeIn {

from {

opacity: 0;

}

to {

opacity: 1;

}

@keyframes fadeOut {

from {

opacity: 1;

height:auto;

overflow:hidden;

}

to {

opacity: 0;

}

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

$(function(){

    $('input[type="text"]').keyup(function(){
        
        var searchText = $(this).val().toUpperCase();
        
        $('.tv-search-result-ul-tm > li').each(function(){
            
            var currentLiText = $(this).text().toUpperCase(),
                showCurrentLi = currentLiText.indexOf(searchText) !== -1;
            //$(this).toggle( showCurrentLi);
            if(showCurrentLi){
              $(this).addClass('tv-in-tm').removeClass('tv-out-tm');
            }else{
              $(this).addClass('tv-out-tm').removeClass('tv-in-tm');
            }
            
        });     
    });

});

$(function(){

$('input[type="text"]').keyup(function(){

var searchText = $(this).val().toUpperCase();

$('.tv-search-result-ul-tm > li').each(function(){

var currentLiText = $(this).text().toUpperCase(),

showCurrentLi = currentLiText.indexOf(searchText) !== -1;

//$(this).toggle( showCurrentLi);

if(showCurrentLi){

$(this).addClass('tv-in-tm').removeClass('tv-out-tm');

}else{

$(this).addClass('tv-out-tm').removeClass('tv-in-tm');

}

});

That’s It. Now you have successfully created jQuery Search List With Bootstrap Layout, Search List Filter Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

2 COMMENTS

mariiya April 13, 2020 At 11:07 pm

Omg , thank you so much for you efforts
, really it’s the first time that i find a very wonderful web site ,
it’s help me a lot with every thing ,
evry thing you need it you find it here and you find more thing too
thank’s to god that i find your site :>

Reply
JakeFromStatefarm March 17, 2023 At 12:05 am

Thank you!

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 List Filter Program

jQuery Search List Source Code

2 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

POPULAR CATEGORY