How we can create an expanding search bar using JavaScript? Solution: See this jQuery Expanding Search Bar With CSS, Search Input Expand.
Previously I have shared some search input programs, but this is an expanding bar. Basically expanding bar is a search icon box and it expands to input field on mouse click or tap. These kinds of search bar you can see most of the website’s navbar, they use this to save space and create an attractive UI.
Today you will learn to create a search input expand program. Basically there is a box with a search icon and when you will click or tap on that it will expands to search input and after typing some query the icon will change to GO button. And after clicking on search or go action it will become the same search icon box which it previously was.
So, Today I am sharing jQuery Expanding Search Bar With CSS. There I have used jQuery for easy work and save time, If you want to create it with pure JS then it will little complicated and take much time. jQuery is JS library and libraries are created for easy work, that’s why I am putting this post in JavaScript category.
If you are thinking now how this expandable search input actually is, then see the preview given below.
Preview Of Search Input Expand
See this video preview to getting an idea of how this expandable input looks like.
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.
You May Also Like:
- Contact Form With HTML CSS JS
- JavaScript To Do List Program
- Login & Signup Form Switch
- CSS Input Label Animation
jQuery Expanding Search Bar With CSS Source Code
Before sharing source code, let’s talk about it. First I have created an HTML form inside a div and put a text input, a submit input and a span placed inside the form. I have placed the text input for the search bar and the submit input for search button and span for placing the search icon. For placing icons I have used the font-awesome library (get).
Now using CSS I have placed all the elements on the right place, as you can see in the preview. I have placed the search icon span over the submit button and hides the text input by putting 0% width. There are a lot of basic CSS commands I have used like height, width, margin, padding, etc.
jQuery Handling here the toggle feature and changing CSS values dynamically by changing the class or ID names. Also, jQuery changing here display properties by modifying the CSS values. 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 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Expanding Search Bar | Webdevtrick.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <form class="searchbox"> <input type="search" placeholder="Search......" name="search" class="searchbox-input" onkeyup="buttonUp();" required> <input type="submit" class="searchbox-submit" value="GO"> <span class="searchbox-icon"><i class="fa fa-search" aria-hidden="true"></i></span> </form> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ body{ background:#e8eaed; } .container{ max-width:600px; margin:50px auto; } .searchbox{ position:relative; min-width:50px; width:0%; height:50px; float:right; overflow:hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; -ms-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s; } .searchbox-input{ top:0; right:0; border:0; outline:0; background:#212121; width:100%; height:50px; margin:0; padding:0px 55px 0px 20px; font-size:20px; color:#ff4e4e; } .searchbox-input::-webkit-input-placeholder { color: #d74b4b; } .searchbox-input:-moz-placeholder { color: #d74b4b; } .searchbox-input::-moz-placeholder { color: #d74b4b; } .searchbox-input:-ms-input-placeholder { color: #d74b4b; } .searchbox-icon, .searchbox-submit{ width:50px; height:50px; 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:#172b3c; border-left: 1px solid white; } .searchbox-open{ width:100%; } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// Code By Webdevtrick ( https://webdevtrick.com ) $(document).ready(function(){ var submitIcon = $('.searchbox-icon'); var inputBox = $('.searchbox-input'); var searchBox = $('.searchbox'); var isOpen = false; submitIcon.click(function(){ if(isOpen == false){ searchBox.addClass('searchbox-open'); inputBox.focus(); isOpen = true; } else { searchBox.removeClass('searchbox-open'); inputBox.focusout(); isOpen = false; } }); submitIcon.mouseup(function(){ return false; }); searchBox.mouseup(function(){ return false; }); $(document).mouseup(function(){ if(isOpen == true){ $('.searchbox-icon').css('display','block'); submitIcon.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'); } } |
That’s It. Now you have successfully created jQuery Expanding Search Bar With CSS, Search Input Expand program. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
