Autosuggest

Autosuggest is used to suggest options to users as they enter something into an input field. A user can select one of the suggestions or enter their own answer.

Autosuggest is used to suggest options to users as they enter something into an input field. A user can select one of the suggestions or enter their own answer.

When to use this component

Use the autosuggest component to help users select from a list of standard responses, for example, countries, languages or nationalities. You could also create your own list for the user to pick from.

How to use this component

The list needs to be made available as a .json file. To query the list we use a JavaScript library called Fuse.js  . You will need to provide the URL where the json file is stored using the autosuggestData parameter.

List formatting

This code example shows how your json should be formatted. The key should be the language code that matches the lang attribute on the <html> element of the page.

[
  {
    "en": "England"
  },
  {
    "en": "Wales"
  },
  {
    "en": "Scotland"
  },
  {
    "en": "Northern Ireland"
  },
]

Multiple suggestions

You can configure the component to allow multiple suggestions by passing in the parameter allowMultiple: "true".

Research on this component

The autosuggest component was tested between February and September 2020 during research for Census 2021. The following findings were reported:

  • some users would type a few characters and then pick from the drop-down that appeared, some just carried on typing the full name
  • confusion seen if users type the full name of a place which doesn’t appear in the drop-down list – they worry that the word they have typed isn’t valid. This could be a particular issues for job titles.
  • if users are able to type in 2 answers, for example, in Census 2021 they could type in two countries for passports, we needed to be more clear that they need to add a comma between entries, or to provide them with multiple boxes to type multiple answers.
  • users find autosuggest helpful if their spelling is poor

Help improve this component

Let us know how we could improve this component or share your user research findings. Discuss the ‘Autosuggest’ component on GitHub