atomic-did-you-mean

This is for:

Developer

The atomic-did-you-mean component is responsible for handling query corrections. When a query returns no result but finds a possible query correction, the component either suggests the correction or automatically triggers a new query with the suggested term.

Introduction

The Did You Mean component detects and corrects spelling errors in queries and provides suggestions when a similar term with more results is available.

User Experience and Best Practices

The relevance of the corrections improves with the size of the index, as more terms become available for comparison. It’s possible to define certain phrases or terms in an organization’s thesaurus, which will expand or replace the query expression before executing the query. However, the Did You Mean component won’t process queries expanded by the thesaurus.

Usage Notes

  • When a query returns no results but finds a possible query correction, the component automatically triggers a new query with the suggested term. This prevents the user having to rewrite their query, which saves them time.

  • If the current query returns results but the index has more frequently occurring terms with similar spelling, the component presents a link containing the new terms. When clicked, the link triggers a new query using the corrected keywords.

  • A soft nudge asking them if that’s what they meant can direct them to the most relevant results.

Guidelines

Using the Did You Mean component is good practice, especially if your index has search terms that can be misinterpreted as an error.

Use Cases and Examples

When submitting a misspelled search of "guitr" in Google it’s automatically corrected, displaying the results for "guitar" and a message indicating that the correction occurred.

Reference

Designing Search: Staying on Track

Searching "guitr" with Google

Shadow Parts

Part Description

auto-corrected

The text displayed for the automatically corrected query.

correction-btn

The button used to manually correct a query.

did-you-mean

The text displayed around the button to manually correct a query.

highlight

The query highlights.

no-results

The text displayed when there are no results.

search-instead-for

The second paragraph of the text displayed when a query trigger changes a query.

showing-results-for

The first paragraph of the text displayed when a query trigger changes a query.

undo-btn

The button used to undo a query changed by a query trigger.