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 8 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.

Recent / Popular Searches (optional)

  • When an empty search field is in focus, a list of recent or popular/trending suggestions may be displayed to enable the user to conduct a quick search.

    • The suggestions list will include up to 8 items.

    • 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.

    • 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.

    • Recent items will be placed above popular/trending items.

    • Each item will be accompanied by an icon, indicating the type of suggestion (recent or popular/trending).

  • Use this component only if the user is expected to search for previously searched queries or popular/trending queries.

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