Related Pages: Searchable Dropdown Menu
...
Search enables users to find relevant content in a list or dataset, by specifying a word, phrase or query
 |
  |
Types
Type | Description | Example |
|---|---|---|
Live search (aka "active search", “incremental search” or “search-as-you-type”) is a search type in which each character that the user enters or deletes runs the search query. This type is usually suitable for small-medium databases | | |
In this search type the system autosuggest terms as the user types 2 or more characters. The search itself is being conducted only after manually running it (by selecting a suggestion, clicking "search" or 'Enter'). This type of search is usually suitable for complex and big database search |
...
Empty search field includes a hint text.
The hint text must start with the word 'Search' to indicate the search functionality.
The next word/s should provide helpful context and imply the results type (e.g. 'search employee', 'search custom data field').
Length
The search field should be in the minimum width of 27 characters.
Internal Logic
Clear All
|
“Clear all” is presented using an "x" icon.
The "x" is presented after the first character is typed, and disappears when the text is cleared (both manually or using the "x" button)
Clicking the "x" will: (1) delete all characters (2) focus on the text field, so that new search term can be entered.
...
The searched string is highlighted in bold within the list of results:
  |
Exceptions- an additional background color will be added to the bold string in these cases:
...
State | Empty | Filled - Live Search | Filled - Search with auto-suggest |
|---|---|---|---|
Regular |   |   | TBD |
Hover |   |   | TBD |
Active |   |  | TBD |
Disabled |   | - | TBD |
Error Applies to “search with auto-suggest” only - TBD (See Field Validation for more details) | - | - |   |
Focused |   |   | TBD |
Focused hover |   |  | TBD |
Focused active |   |  | TBD |
Interaction
...