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(`(${query})`, 'gi'), ' $1 '). Style strong with a different color to highlight the match.

Question 1

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(`(${query})`, 'gi'), '$1'). Style strong with a different color to highlight the match.

Question 2

How do you build an autocomplete search bar in JavaScript?

Accepted Answer

Create an input and a suggestions list. Debounce the input (300ms). Fetch suggestions on input. Render filtered results. Add keyboard navigation (ArrowUp/Down, Enter, Escape). Highlight matching text. Close on click outside. Show loading and no-results states.

Question 3

Why do you need debounce in an autocomplete search bar?

Accepted Answer

To avoid making an API call on every keystroke. Debounce delays the fetch until the user stops typing for 300ms. This reduces API calls, improves performance, and provides a better user experience.

Question 4

How do you implement keyboard navigation in an autocomplete search bar?

Accepted Answer

Track a currentHighlight index. ArrowDown increments, ArrowUp decrements. Enter triggers the highlighted item's click. Escape closes the suggestions. Toggle a 'highlighted' CSS class on the active item.

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

More FAQs in Building an Autocomplete Search Bar: A Complete Guide

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.