Highlight the matching portion of each suggestion.
Simple approach:
function highlightMatch(text, query) {
const index = text.toLowerCase().indexOf(query.toLowerCase());
if (index === -1) return text;
return (
<>
{text.slice(0, index)}
<mark>{text.slice(index, index + query.length)}</mark>
{text.slice(index + query.length)}
</>
);
}
Advanced: Handle multiple matches, fuzzy matching, or match at word boundaries.
Styling: Use a visible but subtle highlight. Don't rely on color alone.