Tabbed search bar using CSS and Javascript

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