Skip to end of banner
Go to start of banner

Search with Auto-Suggest

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this content. View the current version.

Compare with Current View Version History

« Previous Version 7 Next »

Description

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 case of a technical constraint, suggestion may be shown after 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 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 and Down keys to navigate between items.

  • Clicking Esc will exit the list.

  • Clicking outside the box will close it.

Validations and errors

No results found

  • 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 this case, the search box will show the text:
    showing results for <corrected term>; Search <original term> instead.

Invalid characters (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


  • No labels