Search⌘ K
AI Features
Home
Courses
Intermediate JavaScript: Building Frontend Components

Formatting the Autocomplete Suggestions

Explore techniques to format autocomplete search suggestions by applying JavaScript templates and dynamic styling. Learn how to bold matching text, manage auxiliary data, and toggle CSS classes for an integrated autosuggest interface. This lesson helps you build functional, styled autocomplete features using modern JavaScript practices.

We'll cover the following...

In this lesson, we’ll address any outstanding functionality that relies on JavaScript.

Outstanding Functionality

  • Using a template for the suggestion and auxiliary data.
    • We need to insert it between <li> elements, so it conforms to regular HTML inside a <ul>, which is where we’re inserting these suggestions.
  • Determine which sections need to be bolded
    • Using a comparison between the input value and the given suggestion
  • Add classes to elements as necessary for them to change their styles dynamically
    • The buttons look like they merge into the autosuggestions list, so I plan to apply a --autosuggest modifier class to
...