jQuery UI Tabs with Search Input in Menu

custom tab panel for search results within the tab interface

by nickadeemus2002

HTML

<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<!-- tabs container -->
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Tab 1</a></li>    
        <li><a href="#tabs-2">Tab 2</a></li>    
        <li><a href="#tabs-3">Tab 3</a></li>    
        <li><a href="#tabs-4">Tab 4</a></li>        
        <li id="searchFormContainer">
             <form id="searchForm">
                 <input type="text" />
                 <input type="submit" id="searchRequest" value="submit">
            </form>
        </li>
    </ul>
    <!-- tab containers -->
    <div id="tabs-1" class="categoryPanel">
        <p>This is tab 1</p>       
    </div>
    <div id="tabs-2" class="categoryPanel">
         <p>This is tab 2</p>
    </div>
    <div id="tabs-3" class="categoryPanel">
         <p>This is tab 3</p>
    </div>
    <div id="tabs-4" class="categoryPanel">
         <p>This is tab 4</p>
    </div>
    <div id="tabs-5">
         <p>Ajax search results will go here........</p>
    </div>    
</div>
<!-- end tabs container -->

CSS

body{font-size:11px;padding:40px;}
#tabs-5{
    border-width: 0;
    display: block;
    padding: 1em 1.4em;
    border-bottom-right-radius: 4px;
    border-bottom-left-radius: 4px;
}
#searchFormContainer{padding-left:15px;}

JavaScript

$(document).ready(function(){
    //manually handle display for orphan tab panel
    $('#tabs-5').hide();
    
    //create tabs interface    
    $('#tabs').tabs({
        //hide orphan panel, show registered panels
        //with select method
        select: function(event, ui) {
            $('#tabs-5').hide();
            $('.categoryPanel').show();     
        },
    });
    
    //with form submit, show orphan panel, 
    //hide registered panels, style current active/selected tab
    $('input#searchRequest').click(function(){
        $('#tabs-5').show();
        $('.categoryPanel').hide();
       $('li.ui-tabs-selected').addClass('ui-state-default')
               .removeClass('ui-tabs-selected ui-state-active');
        //preventing default for now.
        $('form').submit(function(e){
             e.preventDefault();
        });
    });    
    
});