Tabbed search bar using CSS and JavaScript

A few lines of code only, this free CSS and JavaScript tutorial will show you how to build a tabbed search bar on the your webpage. Although the layout is quite simple but it is still very reality and useful. And maybe from this tutorial, you will have the ideas to build more excellent products in the future.


Sampled by © JavaScriptBank.com

Some lines of JavaScript code can help you to add nice effects to improve some features of your websites.


This tutorial explains how to implement a simple tabbed search bar using CSS and a javascript function which set "active" the selected tab and changes the value of an hidden <input> element to set search options and execute your search only for all items related to the selected topic (for example: web, images, videos...).



Take a look at how it works Download this tutorial


HTML code for tabs
I used a <ul> list with <li> element to implement tabs

<ul class="search-options">
<li id="tab1" class="selected"><a href="#" onclick="javascript:setSearchOptions(1);">Web</a></li>
<li id="tab2"><a href="#" onclick="javascript:setSearchOptions(2);">Images</a></li>
<li id="tab3"><a href="#" onclick="javascript:setSearchOptions(3);">Videos</a></li>


You can add other tabs simply adding new <li>elements using a progressive number for ID attribute (tab4, tab5, teab6...). Each tab call a javascript function setSearchOption() which set "active" the selected tab and set the value of the following hidden <input> field to enable search options:

<input type="hidden" name="searchopt" id="searchopt" />


When you submit the form (using PHP or another server side language), if is set the post variable related to this hidden field ($_POST['searchop'] for example) and this variable is equal to some value (an integer or a string), then you can execute a query instead of another one. For example if you select image tab, your query will execute the search only for images.

Javascript setSearchOptions() function
This is the function which set the active tab and change the value of the hidden input element:

function setSearchOptions(idElement){
/* Total Tabs above the input field (in this case there are 3 tabs: web, images, videos) */
tot_tab = 3;
tab = document.getElementById('tab'+idElement);
search_option = document.getElementById('searchopt');
for(i=1; i<=3; i++){
if(i==idElement){
/*set class for active tab */
tab.setAttribute("class","selected");
/*set value for the hidden input element */
search_option.value = idElement;
} else {
/*unset class for non active tabs */
document.getElementById('tab'+i).setAttribute("class","");
}
}
}

For more infos or questions contact me :)

Take a look at how it works Download this tutorial

Language
Translate this page to English Translate this page to French Translate this page to Vietnamese

Recent articles
How to open a car sharing service
Vue developer as a vital part of every software team
Vue.js developers: hire them, use them and get ahead of the competition
3 Reasons Why Java is so Popular
Migrate to Angular: why and how you should do it
The Possible Working Methods of Python Ideology
JavaScript Research Paper: 6 Writing Tips to Craft a Masterpiece
Learning How to Make Use of New Marketing Trends
5 Important Elements of an E-commerce Website
How To Create A Successful Prototype For Your PCB


Top view articles
Top 10 Beautiful Christmas Countdown Timers
65 Free JavaScript Photo Gallery Solutions
Adding JavaScript to WordPress Effectively with JavaScript Localization feature
Best Free Linux Web Programming Editors
Top 10 Best JavaScript eBooks that Beginners should Learn
16 Free Code Syntax Highlighters by Javascript For Better Programming
Top 50 Most Addictive and Popular Facebook mini games
More 30 Excellent JavaScript/AJAX based Photo Galleries to Boost your Sites
Top 10 Free Web Chat box Plug-ins and Add-ons
The Ultimate JavaScript Tutorial in Web Design


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com