How to create simple search bar using jQuery event

Search option is the most common option that exists in every website. Today, we are going to learn how to create a simple search bar using jQuery event plugin. It is a third party plugin that needs to call from .html document. jQuery is the library of JavaScript and you can get a lot of ready-made script here to add functionality in your website by using them.

Some people limits using jQuery because it takes a long time to loading. So, it is render blocking object that can make a website slow. It is partially true. But, you can easily avoid this problem by using .html ‘async’ attribute.

What can do the “async” attributes for my webpage?

HTML “async” attributes are only used for the external JavaScript source. It allows an external .js file to continue the loading process along with a webpage, and not block the page for complete the download process of JavaScript.

Using this method you can easily use jQuery with your website without blocking the page from quick load or parsing. For this search bar we are going to use this jQuery plugin:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" async></script>

You can also save this file in your theme directory and connect it using the same method.  So, let’s get start to prepare the search bar now:

Step-1: First of all we are going to create a folder and rename it “test search bar”. In this folder we are going to create three file, such as .html, .css and .js file.

Now, open the .html file in a text editor and add the following:

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Test Search Bar</title>
</head>

<body>
  <nav id="topbar">
    <ul class="navigation">
      <li class="threebar"><a href="#">Menu</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Contact us</a></li>
    </ul>
    
    <div class="searchlink" id=" searchlink”>
      <div class="searchform">
        <form id="search">
          <input type="text" class="s" id="s" placeholder="Search…">
          <button type="submit" class="sbtn">Search</i></button>
        </form>
      </div>
    </div>
  </nav>
</body>
</html>

Now, save the document and open it in a browser. You’ll see the search bar and menu like below:

search bar and menu

We are now see a simple plain .html file that is not add any .css style sheet with it. So, we are going to add a style.css file with this document. To linking it add the following .html script before </head> tag.

  <link rel="stylesheet" type="text/css" media="all" href="style.css">

Open the .html and .css file side by side in a text editor. My favorite text editor is Notepad++. You can download it from here: https://notepad-plus-plus.org/download/v6.8.8.html

Find the css selector from .html file and arrange them into .css file. Here we found some css class and id and separate them.

#topbar
.navigation
.searchlink 
.searchform
#search 
#s
.sbtn

Okay, done. It is now time to add some value to the .css selector to beautify .html file. Let’s add the following rule’s to our .html file:

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  outline: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

Remember that, it is a general rule that needs to add in every .css document. That is why, you don’t have to bother for add it with every selector.

Now, we are going to add some other general rules for html, body, br, article and other html elements:

html { overflow-y: scroll; }
body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 62.5%;
  line-height: 1;
  color: #555;
}

br { display: block; line-height: 1.6em; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }

input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; }
em, i { font-style: italic; }

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; height: auto; width: 100%; }

Now, we are going to style the main structure for this page:

/** page structure **/
#topbar {
  display: block;
  height: 40px;
  background: #75de89;
}

.navigation {
  display: block;
  float: left;
}

.navigation li { 
  display: block;
  float: left;
}

.navigation li a {
  display: block;
  float: left;
  font-size: 1.4em;
  line-height: 40px;
  padding: 0 25px;
  text-decoration: none;
  font-weight: bold;
  color: #000;
}
.navigation li a:hover {
  color: #dedede;
}

.navigation li.threebar {
  display: none;
  font-size: 1.8em;
}
.navigation li.threebar a { position: relative; padding: 0 30px; }
.navigation li.threebar a:hover {
  padding: 0 30px;
  color: #bababa;
  background: #75de89;
}

.searchlink {
  display: block;
  float: right;
  position: relative;
  padding: 0 20px;
  right: 0;
  font-size: 16px;
  cursor: pointer;
  height: 40px;
  line-height: 40px;
}
.searchlink:hover, .searchlink.open {
  color: #;
   background: #75d120;
}

.searchlink.open > .searchform {
  display: block;
}

The search bar is now looks very simple and we don’t add any style for the search field yet.

green search bar

So, we can add some style to it. Now, the search field is disappear, and we only see the “search”. But whenever you are hover over on the search field, you will see a different color.

Green search bar with white color

Now, it is time to add the jQuery functionality and search icon. So, we can add the simple code before </head> tag to linking external jquery source that is required to create on/off functionality.

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" async></script>

And we also add the icon from an external source to hide the search bar. For this functionality we add the following .css file before </head> tag:

<link rel="stylesheet" type="text/css" media="all" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">

And we change the menu and search field with icon, so our search field will collapse within a icon. After the replacement of .html codes it’s looks like the below:

<!doctype html>
<html lang="en-US">
<head>
  <meta charset="utf-8">
  <meta http-equiv="Content-Type" content="text/html">
  <title>Test Search Bar</title>
  <link rel="stylesheet" type="text/css" media="all" href="style.css">
  <link rel="stylesheet" type="text/css" media="all" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
  <nav id="topbar">
    <ul class="navigation">
      <li class="threebar"><a href="#"><i class="fa fa-bars"></i></a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#">About us</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Contact us</a></li>
    </ul>
    
    <div class="searchlink" id=" searchlink”>
          <i class="fa fa-search"></i>
      <div class="searchform">
        <form id="search">
          <input type="text" class="s" id="s" placeholder="Search…">
          <button type="submit" class="sbtn"><i class="fa fa-search"></i></button>
        </form>
      </div>
    </div>
  </nav>
</body>
</html>

And we add some media query to make it responsive in small device:

/** media queries **/
@media screen and (max-width: 515px) {
  .navigation li { display: none; }
  .navigation li.threebar { display: block; }

}

/** clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
 
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }

After add search icon, the search bar is now looks like the below.

Mobile Search bar and menu

Now, we are going to add the piece of code that is make the search field visible as we click it and also invisible after clicking again. Add this code before the last</body> tag.

<script type="text/javascript">
$(function() {
 var $searchlink = $('#searchlink');
 
 // on click effect
 $searchlink.on('click', function(e){
 var target = e ? e.target : window.event.srcElement;
 
 if($(target).attr('id') == 'searchlink') {
 if($(this).hasClass('open')) {
 $(this).removeClass('open');
 } else {
 $(this).addClass('open');
 }
 }
 });
});
</script>

This is the final look of the search field and menu.

search icon on click

If you want to add the hover effect such as the search bar will open after hover over the search icon and disappear with your mouse cursor, you can replace the piece of code with hover effect:

<script type="text/javascript">
$(function() {
  var $searchlink = $('#searchlink');
  
  // hover effect
  $searchlink.on('mouseover', function(){
    $(this).addClass('open');
  }).on('mouseout', function(){
    $(this).removeClass('open');
  });
});
</script>

And that’s it, we finally got. You can also add the same functionality for the three bar menu too.

Bonus Tips: If you want to convert this search field in WordPress php, use this simple piece of code between search division:

<div class="searchform">
<form id="search" method="get" class="search-form" action="<?php echo home_url( '/' ); ?>">
 <label>
 <input type="search" class="s" id="s" placeholder="<?php echo esc_attr_x( 'Search …', 'placeholder' ) ?>" value="<?php echo get_search_query() ?>" name="s" />
<button type="submit" class="sbtn"><i class="fa fa-search"></i></button>
</label>
</form>
 </div>

The code is execute the following simple search field:

<div class="searchform">
   <form id="search">
      <input type="text" class="s" id="s" placeholder="Search…">
      <button type="submit" class="sbtn"><i class="fa fa-search"></i></button>
    </form>
  </div>

If you don’t want to add the external source, just download the search bar project from below, where I host all required files and css.

Test Search Bar

Leave a Reply

Your email address will not be published. Required fields are marked *