<?xml version="1.0" encoding="utf-8"?>

Highlight the suggested part in auto-suggested queries

Highlight the suggested part in auto-suggested queries Bad Practice
Highlight the suggested part in auto-suggested queries Best Practice

When you offer an auto-suggest search dropdown, differentiate the characters typed by users and the characters suggested by the system to complete the query. It helps users understand why you're offering these queries to them and helps them scan more effectively. You can use bolding, italics, or color to communicate the differences between these parts.

The NN Group offers two approaches to doing this:

  • If your system provides suggestions by finishing users' text and appending characters to the end, you should highlight the suggested characters.
  • If your system provides the most popular searches that contain users' text anywhere in the query, it makes more sense to highlight the users' characters.[1]
Improve your UX & Product skills with interactive courses that actually work