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 6 Next »

Lead: Shani Laendler (Unlicensed)  ONGOING

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

  • After entering 1 character the system will check for suggestions (in case of technical constraint suggestion may be checked after 3 characters). If at least one suggestion was found the autosuggest box will open.

  • The list will refresh after each keystroke. If no suggestions will be found the box will close

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

  • Items sort will usually be sorted by frequency, from high to low, yet may change according to the need (e.g. alphabetically)

  • No item will be selected by default. The user may select an item either by using the mouse or by using the ‘up’ and ‘down’ keys to navigate between items and ‘Enter’ to select. 'Esc' to exit the list.

  • Clicking outside the popover will close it

Highlight Characters

Select one of the approaches below for highlighting characters, according to the need. 

  1. "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 - TBD

No results found

  • The results area will clearly state no results were found

  • The text will say "no <items> were found" (e.g. no categories were found, no employees were found).

  • Suggestions for improving the search, for example:

    • Make sure all words are spelled correctly

    • Try different key words

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

The text should say “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.

  • Depending on the use case



  • No labels