How to write jQuery code for developing toggle search bar

Byadmin

Develop the toggle search bar using jQuery, which has a search icon that will toggle on click and a cross icon that will remove the search word on click.

Pre-requisites:

  • Laptop or PC with Preferred OS
  • Basic knowledge of HTML, CSS, and JS
  • Any IDE preferably VS code editor

Let’s get started with writing the input fields in markup, followed by CSS, and finally the actual implementation of javascript toggle functionality

Step:1 Required HTML input fields

Initially, we have to be aware of what kind of form elements we need to consider like we need one input field to take search item and the other is submit button. After getting an idea about the type of inputs then write the markup in your own style. Here is my HTML code for this project.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jQuery toogle search-bar</title>
    <!-- this is the jQuery cdn link -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="searchbox">
      <input
        type="search"
        placeholder="Search......"
        name="search"
        class="searchbox-input"
        required
      />
      <input type="submit" class="searchbox-submit" />
      <span class="searchbox-icon">🔍</span>
    </div>
    <script src="./script.js"></script>
  </body>
 </html>

You can get the complete code from my git repo https://kosarajunavya.github.io/jQueryChaining/index.html

Step:2 Styling your search-bar

Read moreNSX-T Tier-1 Service Router (SR) Placement

Before going to the jQuery functionality we have to write some CSS for getting that toggle effect like storing some required CSS properties to use them in jQuery.

body {
  background: #2a8df0;
}
.container {
  width: 600px;
  margin: 50px auto;
}
.searchbox {
  position: relative;
  min-width: 40px;
  width: 0%;
  overflow: hidden;
  border-radius: 50%;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}
.searchbox-input {
  top: 0;
  right: 0;
  border: 0;
  outline: 0;
  background: #ffffff;
  width: 200px;
  height: 40px;
  margin: 0;
  padding: 0px 55px 0px 20px;
  font-size: 20px;
  color: #293033a6;
}
.searchbox-input::-webkit-input-placeholder {
  color: #293033a6;
}
.searchbox-input:-moz-placeholder {
  color: #293033a6;
}
.searchbox-input::-moz-placeholder {
  color: #293033a6;
}
.searchbox-input:-ms-input-placeholder {
  color: #293033a6;
}
.searchbox-icon,
.searchbox-submit {
  width: 40px;
  height: 40px;
  display: block;
  position: absolute;
  top: 0;
  font-family: verdana;
  font-size: 22px;
  right: 0;
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  color: #fff;
  background-color: #ffffff;
  border-radius: 50%;
}
.searchbox-open {
  width: 200px;
  height: 40px;
  border-radius: 40px;
}

Step:3 jQuery code

Here is the actual functionality of the toggle navigation bar. Just read each and every line of the below code, you will get the logic.

$(document).ready(function () {
  var isOpen = false;
  $(".searchbox-icon").click(function () {
    if (isOpen == false) {
      $(".searchbox").addClass("searchbox-open");
      $(".searchbox-input").focus();
      isOpen = true;
    } else {
      $(".searchbox").removeClass("searchbox-open");
      $(".searchbox-input").focusout();
      isOpen = false;
    }
  });
  $(".searchbox-icon").mouseup(function () {
    return false;
  });
  $(".searchbox").mouseup(function () {
    return false;
  });
  $(document).mouseup(function () {
    if (isOpen == true) {
      $(".searchbox-icon").css("display", "block");
      $(".searchbox-icon").click();
    }
  });
  function buttonUp() {
    var inputVal = $(".searchbox-input").val();
    inputVal = $.trim(inputVal).length;
    if (inputVal !== 0) {
      $(".searchbox-icon").css("display", "none");
    } else {
      $(".searchbox-input").val("");
      $(".searchbox-icon").css("display", "block");
    }
  }
  $("input").keyup(function () {
    buttonUp();
  });
});

credits to Nikhil pen

Final results:

Result GIF of Toggle search bar with jQuery

Conclusion: 

With the given code you can see the exact results that of how I have shown in the above video. So if you want to do any modifications and update the functionality, please go on and let me know your valuable suggestions in the comment section.

Read moreVCF, NSX, SD-WAN, AWS

Thank you for reading this blog!

Similar Posts