With the growth of AMP implementations on the web, I wanted to build support for Algolia powered autocomplete and AMP. I did some research and wanted to share that with you, so we can come up with an optimal solution:
For some background, AMP is a completely custom HTML doctype, with very strict restrictions. E.g. the
<img> tag isn't supported, but you need to use
<amp-youtube data-videoid='xXxx1'></amp-youtube> baked into AMP itself.
Leverage existing components:
amp-form component has support for an event listener for an
<input> change (after keystroke). It provides an XHR callback endpoint, and the response can be JSON which is parsed to Mustache.
A very quick mockup showing this: https://jsfiddle.net/say4y2at/
But, the issues to work around:
- AMP forces a 300ms debounce on
<input> changes, removing the instant feedback Algolia thrives on.
- Their XHR supports only
<form> GET or POST request. Algolia's endpoints
/query expects JSON POST.
The fastest solution to leverage existing AMP components seems to allow for
/query to also support a true
<form> XHR POST, e,g.
<input type='hidden' name='x-algolia-id' value='xxx'> support.
Plan B: create
Another way is to create a custom component given AMP is an open source project. I did something similar with Facebook's comments plugin, which I made into a component to amp-
facebook-comments. This route maybe longer to execute, and more work. I could help, but we might want to figure out first if there is enough demand.