Formatting the Autocomplete Suggestions

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 the element when the autosuggestion results are shown.

Using a template

Wrapping API​ results into a template has gotten a lot easier since ES6 introduced template literals. The alternative before this was to just concatenate sections of the template with dynamic variables, either through + or have them in a list to join. For example, "<div>" + name + "</div">. With template literals, we just use ${variable} anywhere in our template string.