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).
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 type="image" element
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.
It uses a layout table for proper RTL mirroring.
The scope is a custom control using a div, a link, an image, and a span.
The input box is created using standard form control.
The search button is created using an image button.
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
The left nav search control is the same control minus the scope dropdown.
Some inline page searches use a text "search" button instead of the image button.
See the example pages for code variations.
Accessibility
Put the search landmark role on the search form.
Put role="presentation" on the layout table.
Put role="button" and aria-haspopup="true" and aria-owns (set to the value of the popup menu id) on the scope control link.
Examples
- scope drop down (global search)
- Find in left nav sections
- Profile search
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)
January 2011: added accessibility documentation.