Searching & search results

The autocomplete component is designed to meet best practice for searching & displaying search results within a page or application. Examples of when to use the autocomplete component might be when selecting an account in a workflow, or when wanting to select an asset or product in a workflow.

Search dropdown results

As users type, after 3 characters have been entered, they begin to see early matches arise in a dropdown below the search input. The component should be able to determine base on the data set if the search results are returning based on:

  • Contains
  • Starts with
  • Fuzzy matching

Other application variables that the component will need to consider are the number of search results or maximum height of the search result display.

How to group or categorise search results, if the data structure support this.

For some scenarios, we want to show all available results upon focusing in the field without entering any characters.

Search result dropdown best practices:

  • Include header categories in the dropdown for ease of scanning when there are complex lists of results
  • Autofocus the top search result
  • Allow scrolling in the search dropdown when there are many results
  • Show how the results match using a highlighting technique
  • Show the number of results that have returned

Submitting & loading state

Between submit and search results loading, there may need to be a loading state dependant on the data source.

Search results screen

In some instances, when the search is important or results are complex, users may need more time and real estate to digest search suggestions in a search result screen. This is where people can view, refine and discover what their query has resulted in.

  • To be designed when required

Search results best practices

  • Include tabs when representing different types of search results (across different data objects)
  • Include totals of the matches made from the query entered
  • Make sure hits are highlighted to show where the match is
  • Use pagination as needed
  • Include filtering and sorting controls so people can further refine the results they are looking
  • Press ’Esc” key to focus out of autocomplete field.
  • To support keyboard-only navigation, ‘Backspace’ key should be enabled to delete tags when a mouse isn’t available which is expected accessibility behaviour. Cursor can be moved (using arrow keys) amongst a group of tags in order to delete specific tags.