...

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

• After entering one character the system will check for suggestions. (in In case of a technical constraint, suggestion suggestions may be shown after entering 3 characters).

• If at least one suggestion was found the autosuggest box will open.

• The list will refresh after each additional keystroke.

• The list will show up to 8 items with no scroll bar.

• Items will be sorted by the frequency, from high to low, yet may change . Other sort options will be implemented as needed (e.g., alphabetically, by relevancy etc.).

• No item will be selected by default.

...

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 and Down keys to navigate between items.

• The search is conducted after selecting a suggestion, clicking the search button or hitting the Enter key.

• Clicking Esc will exit the listthe box and return the focus to the search bar.

• Clicking outside the box will close it.

...

• In case no results were found 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 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 of a medium-large size.

• the results need to be retrieved from the backend.

...