Lead: Shani Laendler (Unlicensed)
| Status | ||||
|---|---|---|---|---|
|
| Table of Contents |
|---|
Description
<< Short description of the component and when it is used >>
<< 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
...
Search with auto-suggest is a type of Search that provides the user with relevant suggestions before the search is submitted.
...
Basic Flow
After entering one character, the system will check for suggestions (in case of Where there is a technical constraint suggestion , suggestions may be checked shown after entering 3 characters).
If at least one suggestion was is found, the autosuggest auto-suggest 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 . Other sort options can be used as needed (e.g. alphabeticallyalphabetical, relevancy etc.).
No item will be selected by default.
Interactions
The user may select an item from the auto-suggest box by either by using the mouse, or by using the ‘up’ Up and ‘down’ keys to navigate between items and ‘Enter’ to select. 'Esc' to exit the list Down keys (the first down keystroke will select the first item).
A search is performed after either:
selecting a suggestion,
clicking the search button, or
hitting the Enter key.
Clicking Esc will exit the auto-suggest box and return the focus to the search bar.
Clicking outside the popover auto-suggest box will close it
Highlight Characters
Select one of the approaches below for highlighting characters, according to the need.
"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.
Recent and Popular Searches (optional)
...
When an empty search field is in focus, a list of recent or popular/trending suggestions may be displayed, enabling the user to perform a quick search.
The suggestions list will include up to 8 items.
There are 3 types of possible suggestions:
Recent items are strings that the specific user has searched for in the past. They will be presented only after the user has conducted at least one previous search, and will include the most recent searches only.
Popular items are strings that are being frequently searched by a lot of users.
Trending items are strings that are being frequently searched by a lot of users, within a recent time frame.
All recent items should always be first.
Popular and trending items should not both be shown in the same list.
The number of recent and popular/trending items should be equal, unless there’s not enough data to provide an equal amount of both types. In this case, the list may be divided unequally.
Each item will be accompanied by an icon, indicating the type of suggestion (recent or popular/trending).
Use this search type only if the user is expected to search for previously searched queries or popular/trending queries.
Validations and errors
No results found
...
When no results are found the auto-suggest box will display:
the text No <items> found (e.g. categories, employees etc.).
suggestions for improving the search, for example:
Make sure all words are spelled correctly.
Try different or fewer keywords.
When possible, provide specific solutions suited to the specific database. For example, when searching for employees, recommend searching by ID or employee number.
Spelling errors (optional)
Misspelled queries should be auto-corrected to the best known query, while allowing the user to revert 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 (optional)
If the user enters invalid characters (for example, !#$% for text-based values), the search box will display a relevant message.
Best Practice
Use:
when the database is of a medium-large size.
when results need to be retrieved from the backend.
Don’t use:
for small or simple databases → use Live Search instead.
Accessibility compliance
Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.
Design
See Search.
Code
See Search.