Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[MASTER FEATURE] Dedicated autocomplete component #9785

Open
ericlindley-g opened this Issue Jun 7, 2017 · 10 comments

Comments

@ericlindley-g
Copy link
Collaborator

ericlindley-g commented Jun 7, 2017

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 (#6625), but we're considering making this possible.

@AndrewKGuan

This comment has been minimized.

Copy link

AndrewKGuan commented Nov 8, 2017

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

@ericlindley-g

This comment has been minimized.

Copy link
Collaborator Author

ericlindley-g commented Nov 8, 2017

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

This comment has been minimized.

Copy link

AndrewKGuan commented Nov 8, 2017

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

This comment has been minimized.

Copy link
Collaborator Author

ericlindley-g commented Nov 8, 2017

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

@cvializ

This comment has been minimized.

Copy link
Collaborator

cvializ commented Nov 10, 2017

@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 cathyxz self-assigned this Dec 18, 2017

@cathyxz

This comment has been minimized.

Copy link
Collaborator

cathyxz commented Dec 20, 2017

Another good FR to keep in mind for this: #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

This comment has been minimized.

Copy link
Member

aghassemi commented Dec 20, 2017

@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.

@ericlindley-g ericlindley-g moved this from Backlog (shortlist) to E-comm in UI Jan 5, 2018

@nainar nainar changed the title Dedicated autocomplete component [MASTER FEATURE] Dedicated autocomplete component Jan 22, 2019

@nainar nainar added this to Next Up in AMP HTML Project Roadmap via automation Jan 22, 2019

@adriennefishman

This comment has been minimized.

Copy link

adriennefishman commented Feb 5, 2019

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

This comment has been minimized.

Copy link
Collaborator

nainar commented Feb 6, 2019

Related issues #8826 and #4071

@jaygray0919

This comment has been minimized.

Copy link

jaygray0919 commented Feb 23, 2019

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.