Highlighting search results

When the user starts typing in an autocomplete and the results are displayed in the dropdown, it isn't always obvious how a given item matches the search criteria. You can help your users better understand the results by highlighting the matched portion of the string value.

How to do it...

You'll want to use two functions from the autosuggest-highlight package to help highlight the text presented in the autocomplete dropdown, as follows:

import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse';

Now, you can build a new component that will render the item text, highlighting as and when necessary, as follows:

const ValueLabel = ...