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.
Table of Contents
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
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:
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.
Thank you for reading this blog!
