Q: How do you highlight matching text in an autocomplete search bar?

Use a regex to wrap the matching part in a tag: text.replace(new RegExp(`(${escapeRegex(query)})`, 'gi'), ' $1 '). Style strong with a different color. Use 'gi' flags for global, case-insensitive matching.

Question 1

Why do you need to escape the query before creating a regex in autocomplete?

Accepted Answer

Because the query may contain special regex characters (., *, +, ?, etc.). If not escaped, they would be interpreted as regex syntax, causing errors or incorrect matches. Escape with string.replace(/[.*+?^${}()|[\]\]/g, '\$&').

Question 2

How do you highlight matching text in an autocomplete search bar?

Accepted Answer

Use a regex to wrap the matching part in a tag: text.replace(new RegExp(`(${escapeRegex(query)})`, 'gi'), '$1'). Style strong with a different color. Use 'gi' flags for global, case-insensitive matching.

Question 3

How do you handle case-insensitive highlighting in autocomplete?

Accepted Answer

Use the 'i' flag in the regex: new RegExp(`(${query})`, 'gi'). The 'i' flag makes the match case-insensitive, so 'app' matches 'Apple', 'APPLE', and 'apple'.

Question 4

How do you highlight multiple matches in an autocomplete?

Accepted Answer

Use the 'g' (global) flag in the regex. This replaces all matches, not just the first. For example, 'banana' with query 'an' would highlight both 'an' occurrences: banana.

Why do you need to escape the query before creating a regex in autocomplete?

More FAQs in Autocomplete: Highlighting Matching Text

Still have questions?

Want to upskill yourself?

Small steps. Big possibilities.

Our courses are taking a Coffee break, but your curiosity shouldn't. Stay engaged with namastedev linkedin, youtube, discord and other resources while you wait.