AMP: Building Accelerated Mobile Pages

Adding search autosuggest

Autosuggest (or autocomplete) is a nice enhancement to any search: as the user types, partial keyword matches are displayed for the user. Let's add this to our search. To achieve this, we'll do the following:

1. When the user enters text, we'll update a new state property: autosuggest.
2. We'll add another amp-list to display the suggestions, and we'll bind the src URL to the autosuggest property.
3. When the autosuggest property updates, the amp-list will perform a new fetch to the server which will respond with partial text matches.

First, the input text field:

<input name="keywords" type="text" placeholder="Search"       on="input-debounced:AMP.setState({               keywords: event.value,               autosuggest: event.value}), autosuggest-list.show" ...