Amphtml: [MASTER FEATURE] Dedicated autocomplete component

[ericlindley-g]

Dedicated component for an autocomplete field using AMP.

Tracking bug — making this available first as a feature that can be composed using existing AMP functionality (https://github.com/ampproject/amphtml/issues/6625), but we're considering making this possible.

[AndrewKGuan]

Looking forward to this new component. There are many companies waiting for its launch.

[ericlindley-g]

Thanks for checking in—that's good to know!

To set expectations: we're working through a backlog of features that aren't possible in AMP yet, so packaging this feature into a component when it's already possible hasn't been slated for the short term. However, I'd be curious to hear if there are folks who aren't able to implement with the current tools, to see if there's anything we can do in the short term to help.

[AndrewKGuan]

Hey Eric,
yeah, with the current amp-bind (input debounce) it is sort of doable but lack some of the things:

• Publisher can't define the minimal number of characters to trigger the xhr fetch

• Suggestion div cannot be collapsed/hide when the user erases his input

[ericlindley-g]

Thanks! /cc @choumx , @cvializ , and @aghassemi w/ this feedback

[cvializ]

@AndrewKGuan Thanks for the feedback and interest in this issue! Just to clarify, the current autosuggest demo does hide the suggestions when the user erases their input. But a minimum number of characters before sending the XHR is a good feature request.

[cathyxz]

Another good FR to keep in mind for this: https://github.com/ampproject/amphtml/issues/12518.

@ericlindley-g do you know what's the state of this? I'd be curious to know if there are any other outstanding FRs for a typeahead and build this out if nobody else is picking it up.

[aghassemi]

@cathyxz From a technical side, cancelable fetch is becoming a reality. Not sure if any browser has implemented it or not, but would be nice for the component to use this feature when available to cancel inflight requests if their result is going to be thrown out anyway as user types.

[adriennefishman]

hi! this sounds awesome. i currently implemented autocomplete using amp-list and amp-selector.
some issues we faced:
1) can't use up and down key arrows to navigate through the list of options unless the user presses tab first (which is not a natural inclination)
2) once the autocomplete list of options is appearing, i would like it to be able to detect a click outside in the outer div, which could cause the the list of options to close but i couldn't get those two divs to interact
thanks!!

[nainar]

Related issues #8826 and #4071

[jaygray0919]

with help from @cvializ we published an experiment on slack (https://amphtml.slack.com/messages/C0ADR0A0K/convo/C9HPA6HGB-1539093427.000100/) and here (https://docs.google.com/document/d/1Y1plGrNltH3w8gDlDkFPzVUIt66CX3EzOKN5KNyjJ3E/edit). FYI, we also published on AMPbin, but it was wiped out. We'd like to be part of any improvements here.

[caroqliu]

Closing since the amp-autocomplete experiment was cleaned up in #22708 and has fully launched:
https://amp.dev/documentation/examples/components/amp-autocomplete/?format=websites