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

Support amp-autocomplete without form #23657

Closed
tharders opened this issue Aug 2, 2019 · 1 comment · Fixed by #23800

Comments

@tharders
Copy link
Contributor

commented Aug 2, 2019

Together with amp-bind amp-autocomplete should work without a form tag.

The following example shows how amp-autocomplete can be used to select the content of an amp-list without the need to submit a form.
This example will run in https://playground.amp.dev/

<!doctype html>
<html >
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="https://amp.dev/documentation/examples/e-commerce/product_browse_page/index.html">
  <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
  <title>amp-autocomplete</title>
  <script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script>
  <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
  <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
  <form class="sample-form" method="post"
        action-xhr="https://amp.dev/documentation/examples/api/echo"
        target="_top">
    <amp-autocomplete filter="substring" min-characters="0"
      on="select:AMP.setState({ query: event.value })">
      Search capital cities: <input on="change:AMP.setState({ query: event.value })">
      <script type="application/json">
        {
          "items": ["New", "North", "South"]
        }
      </script>
    </amp-autocomplete>
  </form>
  <amp-list [src]="'https://amp.dev/documentation/examples/api/autosuggest/search_list?q=' + query"
            height="750" binding="no" layout="fixed-height">
    <template type="amp-mustache"> 
        {{#results}}
        <div>{{.}}</div>
        {{/results}}
    </template>
  </amp-list>
</body>
</html>

This shows that the form should never be submitted and therefore should be removed.
But currently amp-autocomplete will not work without a form.

@sebastianbenz

This comment has been minimized.

Copy link
Contributor

commented Aug 6, 2019

This is a must for being able to combine amp-autocomplete with infinite scrolling. Currently, this will result in the same search request being fired twice:

  1. dummy form submission
  2. amp-list src request

//cc @nainar

@nainar nainar added this to Backlog in UI - FixIt via automation Aug 6, 2019
@nainar nainar moved this from Backlog to Candidates in UI - FixIt Aug 6, 2019
@cvializ cvializ moved this from Candidates to In progress in UI - FixIt Aug 8, 2019
UI - FixIt automation moved this from In progress to Done Aug 8, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
UI - FixIt
  
Done
3 participants
You can’t perform that action at this time.