Autocomplete: Highlighting Matching Text

Autocomplete: Highlighting Matching Text

Highlighting the matching portion of each suggestion improves UX. Here is how.

Implementation

function highlightMatch(text, query) {
  if (!query) return text;
  const regex = new RegExp(`(${escapeRegex(query)})`, "gi");
  return text.replace(regex, "<strong>$1</strong>");
}

function escapeRegex(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
}

Usage

suggestions.innerHTML = items.map((item) => `
  <li class="suggestion-item">${highlightMatch(item, query)}</li>
`).join("");

CSS

.suggestion-item strong { color: #007bff; font-weight: bold; }

Example

Query: "app"

• "apple" -> "apple" (app is highlighted)
• "pineapple" -> "pineapple" (app is highlighted)
• "application" -> "application" (app is highlighted)

Edge Cases

• Empty query: return the text as-is.
• Special characters in query: escape them for regex.
• Case-insensitive matching: use the i flag.
• Multiple matches: all are highlighted (global flag g).

The Takeaway

Highlight matching text: escape the query for regex, create a case-insensitive global regex, replace matches with <strong>$1</strong>. Style strong with a different color. Handle edge cases (empty query, special characters, multiple matches). This improves the autocomplete UX significantly.