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
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
WordPress Landing Page Conversion Essentials to Convert More
4 Development Hacks To Make Your Website Launch A Success
Why Data Recovery Software and Services are Important
Why Engineers Specializing in DevOps Are the Wave of the Future
The Ultimate Checklist for HTTP to HTTPS Migration


Top view articles
65 Free JavaScript Photo Gallery Solutions
Top 10 Beautiful Christmas Countdown Timers
Best Free Linux Web Programming Editors
Top 50 Most Addictive and Popular Facebook mini games
Top 10 Free Web Chat box Plug-ins and Add-ons
50+ Beautiful Resources of HTML Form using CSS and JavaScript
Top 10 Best JavaScript eBooks that Beginners should Learn
The Ultimate JavaScript Tutorial in Web Design
HTML5 Web Workers Multithreading in JavaScript
Learn more about JavaScript Inheritance with Tiny JavaScript Example Codes


Free JavaScript Tutorials & Articles
at www.JavaScriptBank.com