Lead: Shani Laendler (Unlicensed) status
| colour | Yellow |
|---|---|
| title | ongoing |
| Table of Contents |
|---|
Description
<< Short description of the component and when it is used >>Search with auto-suggest is a type of search that provides the user with relevant suggestions before the search was submitted.
<< Most communicative screenshot of the component >>
Basic Flow
<< Relevant only for patterns that have a more complex flow than the typical control (e.g. drag & drop) >>
Usage & Behaviour
<< Use a visual for each sub-section >>
General guidelines
<< Describes the component, use sub-section when they are relevant to the components >>
<< In case of a complex component duplicate this section, describing each sub-component separately >>
Internal Logic
Auto-Suggestions
After entering 1 After entering one character the system will check for suggestions (in case of a technical constraint, suggestion may be checked shown after 3 characters).
If at least one suggestion was found the autosuggest box will open.
The list will refresh after each additional keystroke. If no suggestions will be found the box will close
The list will show up to 8 items with no scroll bar bar.
Items sort will usually be sorted by the frequency, from high to low, yet may change according to the need (e.g. alphabetically)as needed (alphabetically, by relevancy etc.).
No item will be selected by default.
Usage & Behaviour
General guidelines
Interactions
The search is conducted after selecting a suggestion, clicking the search button or hitting the Enter key.
In the search box the user may select an item either by using the mouse or by using the ‘up’ Up and ‘down’ Down keys to navigate between items and ‘Enter’ to select. 'Esc' to .
Clicking Esc will exit the list.
Clicking outside the popover box will close it
Highlight Characters
...
.
...
"Starts with" approach: if the suggestions appends characters to the end of the typed text then you should highlight the suggested characters:
 |
"Contains" approach: if the suggestions suggest popular queries that contain the typed text anywhere in the query, it’s best to highlight the typed query:
 |
Search logic:
The search is conducted only after (1) selecting a suggestion (2) clicking the "Search" button or (3) 'Enter' in the keyboard.
Results:
List Types
Hierarchical tree view
Validations and errors
...
No results found
...
The results area will clearly state In case no results were found The text will say "the search box will display:
the text no <items> were found
(e.g.
categories
,
employees
etc.).
Suggestions for improving the search, for example:
Make sure all words are spelled correctly
Try different
keywords
When possible, provide specific solution suited for the specific database. For example, when searching for employees advice to search by ID, or employee number
Spelling mistakes
Misspelled queries should be auto-corrected to the best known query, while allowing to go back to the original query:
...
...
In this case, the search box will show the text:
showing results for <corrected
...
term>; Search <original term>
...
instead.
Invalid characters
...
The user may enter invalid characters such as !#$%
...
maybe address this as a “no results” suggestion.
...
(optional)
In case the user entered invalid characters (for example, !#$% for text-based values) the search box will display a relevant message instead of the no results found message).
Best Practice
Use when:
the database is medium-large size.
the results need to be retrieved from the backend.
Don’t use when:
The query is applied to a small or simple database → use Live Search instead.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
See Search
Code
See Search