Skip to main content link. Accesskey S

Search

The search form exists as a global search (in the title bar) and as a local search (find) in the left nav (uses the same classes).

Directionality:

Classes

  • lotusSearch - the class that goes on the form tag
  • lotusScope - the class that goes on the scope link
  • lotusText - the class that goes on the search input box
  • lotusInactive - an additional class that goes on the search input box until the user starts typing in the box
  • lotusSearchButton - the class that goes on the search input button

Basic Implementation

The global search contains a scope dropdown that uses our action menu component.

The search is created using a form with the class of lotusSearch.

The scope is a custom control using a div, a link, and a span.

The input box and search button are created using standard form controls.

The text input field initially has gray text (set by lotusInactive class). As soon as the user starts typing, that class should be removed.

Variations

A smaller search button is used in the left nav search control.

See the example pages for code variations.

Examples

Sample HTML

CSS (search.css)

Theme CSS (searchTheme.css)

The search control has changed a lot over time. The scope used to just be a button drop-down but it was too hidden to users. We then used a plain select box. We now have a custom scope drop-down control so we can include icons.

A layout table is used to help control layout (cross browser/bidi)

See Also:

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.