Usage

A Search Box provides a mechanism for searching broadly across an application or all the columns of a dGrid. It can be used for both desktop and mobile applications.

Alternatives

Filtering - Use to provide an alternative facility for refining a data set based on specific criteria - for example over columns in a dGrid.
Browsing - For non-columnar data sets browsing tools such as Treeview or links lets the user explore the data.

Types

All types behave the same way once open and active.

Fixed

Search Field width does not change when window is resized.

Variable

Search Field width resizes when the window is resized.

Expandable

Search Icon is the quiescent state. When clicked the Search Field opens to Fixed/Variable width.

Expandable is space-efficient and best utilized when space is at a premium or the context (page or dialog) is not searched.

Options

Typeahead/Type Ahead with Recents

Typeahead makes searching more efficient. As the user starts entering characters the closest matches are displayed in a drop menu and can be selected without first going to a list of results, this removes the need for an interstitial page of results.

Typeahead can also be configured to provide the most recent searches before the user starts a new search. When the user clicks into the searchbox the drop menu opens, before a character is typed, and the most recent searches are presented. Once a character is typed the list is replaced with results from the current search.

Counter

The results counter and navigation controls only appear after a query is submitted and results are returned.

Results Filtering/Highlighting

Filtering - only shows items with the query text and highlights the query text within.
Highlighting - keeps a complete list of all items but highlights the items with the query text.

Placement

Desktop Headers - Search icon should be the left-most so that it opens without disrupting other icons.
Mobile Headers - Search icon should be placed in the global header. The search field then expands to cover the title.
With Filter Bar - When a search is submitted the filter bar appears if it isnt already in view. A search pill is placed in the filter bar, it contains the query that was applied “All: tylorem ipsum”. The pill takes the form of a label value. If another query is made a pill segment is added. Each segment can be removed independently.