Recently I had to update the home page of a big brand website that contained a quick search option at the top right of the page, a common feature on sites.

The search was to accommodate 2 tabs with a different type of search on each, each having it’s own search button.

To improve the usability of the feature it was necessary to dynamically assign the default button on the page whilst at the same time allowing the enter key to be handled by input elements outside the search tabs.

The solution was done in such a way as to minimise changes to existing code and minimise risk of bugs being introduced through change.

jQuery to the rescue!

The solution was to have each tab in it’s own div element, using CSS to style the look (and background image) of each tab. One of the divs has an initial style of "display:none" to hide it.

A list was used to overlay hidden buttons on the tab images and respond to the user Click event. The Click event of the ul elements is used to call the function DisplaySearchCriteria and toggle the display of tab-one and tab-two divs.

<asp:PanelID="SearchPanel"runat="server"EnableViewState="false"><divid="SearchBox"class="SearchBoxDefault"><divid="SearchMenu"><ul><liid="tab-one-button">li><liid="tab-two-button">li>ul>div><divid="tab-one"style="display:block"><asp:TextBoxID="SearchText"CssClass="SearchTerm"runat="server"/><asp:LinkButtonID="SearchButton"CssClass="SmallSearchButton"runat="server"Text="Go"OnClick="SearchButtonClick"CausesValidation="False"/><asp:ButtonID="btnOneSearch"CssClass="DefaultButton"runat="server"Text=""onclick="SearchButtonClick"CausesValidation="False"/>div><divid="tab-two"style="display:none"><span>fromspan><asp:TextBoxID="txtFrom"runat="server"class="minValue"MaxLength="9">asp:TextBox><span>tospan><asp:TextBoxID="txtTo"runat="server"class="maxValue"MaxLength="9">asp:TextBox><span>pointsspan><asp:LinkButtonID="SearchButtonTwo"ValidationGroup="MaxMinValidation"runat="server"CssClass="SmallSearchButton"Text="Go"CausesValidation="true"onclick="SearchButtonTwoClick"/><asp:ButtonID="btnTwoSearch"CssClass="NotDefaultButton"ValidationGroup="MaxMinValidation"CausesValidation="true"runat="server"onclick="SearchButtonTwoClick"/>div><matrix:ClientHyperLinkID="SearchLink"NavigateUrl="~/Search.aspx"runat="server"CssClass="SearchAdvancedText"Text="more options"/><asp:CompareValidatorID="valCompare"runat="server"CssClass="MinMaxValidation"ErrorMessage="Maximum value must be greater than minimum value"ControlToCompare="txtTo"ControlToValidate="txtFrom"Operator="LessThanEqual"SetFocusOnError="True"Type="Integer"ValidationGroup="MaxMinValidation">asp:CompareValidator>div>asp:Panel>

Now the tricky part was getting the enter key handled and to respond only when raised in the search portion of the page. I say tricky but dead simple with jQuery. See the code snippet below, the first block with the comment “Bind event handler for setting default button”

The trick was to bind this only to input controls with the SearchBox div and to check for the Enter Keypress event, firing off the Click event of any control with the class DefaultButton.

Of course you need to handle only one button having the DefaultButton class assigned to it and this is done in the DisplaySearchCriteria function.

This is a code complete sample apart from the stylesheet and this code makes up an control that is part of a page.

Hope this helps someone.