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
- 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.
Variations
A smaller search button is used in the left nav search control.
See the example pages for code variations.
Examples
- scope drop down (global search)
- Find in left nav sections
- Advanced search page
- 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)