githubmirror/amphtml

examples/autocomplete.amp.html
1 180 строк36 KB
Caroline Liu
Apply lang="en" to examples/ (#34759)
10 июн 2021, 17:30
10 июн 2021, 17:302ee75c4
<!DOCTYPE html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>AMP Autocomplete Demo</title>
    <link rel="canonical" href="amps.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"/>
    <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>
    <script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-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-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-latest.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
    <style amp-custom>
      body {
        padding: 15px;
      }
      .custom {
        padding-top: 4px;
        font: 8pt 'Courier New', Courier, monospace;
      }
      input[name='favoriteState'] {
        width: 2em;
      }
      input[type='submit'] {
        display: block;
        margin-top: 10px;
      }
      .out-of-stock {
        text-align: right;
        text-transform: uppercase;
        font: 8pt 'Arial', sans-serif;
        right: 0;
      }
      .autocomplete-partial {
        font-weight: bold;
      }

      #select-example .autocomplete-partial {
        color: red;
        text-decoration: underline;
      }
      .wide {
        width: 50vw;
      }
      .autocomplete-selected {
        color: blue;
        text-decoration: underline;
      }
      .profile-pic {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        margin-left: -5px;
      }
      .close-friends {
        display: flex;
        align-items: center;
        line-height: 18px;
      }
      textarea {
        padding: 0.5rem; /* default-ui-space-large */
        border: 1px solid rgba(0, 0, 0, 0.33); /* default-ui-med-gray */
        font-size: 1rem; /* default-ui-font-size */
        line-height: 1.5rem; /* default-ui-space-large */
      }
    </style>
  </head>
  <body>
    <h1>Autocomplete</h1>
    <h2>Inline</h2>
      <amp-autocomplete
        inline="@"
        min-characters="0"
        suggest-first
        filter="none"
        src="/form/mention/query"
        [src]="colorsEndpoint"
        query="q"
        on="select:AMP.setState({inlineInputSelect: event.value})"
      >
        <label>remote data</label><br />
        <textarea
          autoexpand
          class="wide"
          name="inlineInput"
          placeholder="Reply"
        ></textarea>
        <template type="amp-mustache" id="amp-template-plain">
          <div data-value="{{ . }}">
            {{ . }}
          </div>
        </template>
      </amp-autocomplete>
      <p>
        <button on="tap:AMP.setState({colorsEndpoint: '/form/autocomplete/query'})">
          mutate [src]
        </button>
      </p>
      <amp-autocomplete
        inline="+"
        min-characters="0"
        suggest-first
        filter="prefix"
        filter-value="email"
      >
        <label>local data</label><br />
        <textarea
          autoexpand
          class="wide"
          rows="2"
          placeholder="Reply"
          name="inlineInput2"
        ></textarea>
        <template type="amp-mustache" id="amp-template-rich">
          <div class="close-friends" data-value="{{ email }}">
            <amp-img
              class="profile-pic"
              height="20"
              width="20"
              layout="responsive"
              alt="Profile picture of AMP logo"
              src="./img/ampicon.png"
            ></amp-img>
            <div class="info">
              <div>{{ name }}</div>
              <div class="custom">{{ email }}</div>
            </div>
          </div>
        </template>
        <script type="application/json">
          {
            "items": [
              {"email": "harrypotter@hogwarts.edu", "name": "Harry Potter"},
              {
                "email": "albusdumbledore@hogwarts.edu",
                "name": "Albus Dumbledore"
              },
              {
                "email": "voldemort@deatheater.org",
                "name": "Tom Marvolo Riddle"
              },
              {"email": "severussnape@hogwarts.edu", "name": "Severus Snape"},
              {"email": "siriusblack@hogwarts.edu", "name": "Sirius Black"},
              {
                "email": "hermionegranger@hogwarts.edu",
                "name": "Hermione Granger"
              },
              {"email": "ronweasley@hogwarts.edu", "name": "Ron Weasley"},
              {"email": "dracomalfoy@hogwarts.edu", "name": "Draco Malfoy"},
              {
                "email": "nevillelongbottom@hogwarts.edu",
                "name": "Neville Longbottom"
              },
              {"email": "rubeushagrid@hogwarts.edu", "name": "Rubeus Hagrid"},
              {"email": "dobby@hogwarts.edu", "name": "Dobby"},
              {
                "email": "bellatrixlestrange@deatheater.org",
                "name": "Bellatrix Lestrange"
              },
              {
                "email": "minervamcgonagall@hogwarts.edu",
                "name": "Minerva McGonagall"
              }
            ]
          }
        </script>
      </amp-autocomplete>
    <p [text]="'Hello ' + inlineInputSelect">Hello World</p>

    <h2>Select Event</h2>
    <p>min-characters = 0, partial red underline</p>
      <amp-autocomplete
        id="select-example"
        filter="substring"
        min-characters="0"
        highlight-user-entry
        src="autocomplete-cities.example.json"
        on="select:AMP.setState({inputSelect: event.value})"
      >
        <input name="input2" required />
      </amp-autocomplete>
    <p [text]="'Hello ' + inputSelect">Hello World</p>

    <h2>Select event with object value</h2>
    <amp-autocomplete filter="token-prefix"
        filter-value="city"
        min-characters=0
        on="select:AMP.setState({chosenPlace: event.valueAsObject})">
      <input type="search" name="city">
      <script type="application/json">
        {
          "items": [
            {
              "city": "Albany",
              "state": "New York"
            }, {
              "city": "Annapolis",
              "state": "Maryland"
            }
          ]
        }
      </script>
      <template type="amp-mustache" id="amp-template-custom">
        <div class="city-item" data-value="{{city}}" data-json="{{objToJson}}">
          <div>{{city}}, {{state}}</div>
        </div>
      </template>
    </amp-autocomplete>
    <p [text]="'Your choice: ' + chosenPlace.city + ', ' + chosenPlace.state">
      Select a place
    </p>

    <h2>Disable browser autofill</h2>
    <p>form has no autocomplete attr</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <label for="frmEmailA">Personal Email</label>
      <input
        name="email"
        id="frmEmailA"
        placeholder="name@example.com"
        required
        autocomplete="email"
      /><br />

      <label for="frmEmailB">Autocomplete Email</label>
      <amp-autocomplete filter="substring" min-characters="0">
        <input
          name="email"
          id="frmEmailB"
          placeholder="name@example.com"
          required
          autocomplete="email"
        />
        <script type="application/json">
          {"items": ["Email 1", "<span>Email</span> 2", "Email 3"]}
        </script>
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
    </form>

    <p>form has autocomplete="on"</p>
    <form
      method="post"
      action-xhr="/form/echo-json/post"
      target="_blank"
      autocomplete="on"
    >
      <label for="frmEmailC">Personal Email</label>
      <input
        name="email"
        id="frmEmailC"
        placeholder="name@example.com"
        required
        autocomplete="email"
      /><br />

      <label for="frmEmailD">Autocomplete Email</label>
      <amp-autocomplete filter="substring" min-characters="0">
        <input
          name="email"
          id="frmEmailD"
          placeholder="name@example.com"
          required
          autocomplete="email"
        />
        <script type="application/json">
          {"items": ["Email 1", "Email 2", "Email 3"]}
        </script>
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
    </form>

    <p>form and input have autocomplete="off"</p>
    <form
      method="post"
      action-xhr="/form/echo-json/post"
      target="_blank"
      autocomplete="off"
    >
      <label for="frmEmailE">Personal Email</label>
      <input
        name="email"
        id="frmEmailE"
        placeholder="name@example.com"
        required
        autocomplete="off"
      /><br />

      <label for="frmEmailF">Autocomplete Email</label>
      <amp-autocomplete filter="substring" min-characters="0">
        <input
          name="email"
          id="frmEmailF"
          placeholder="name@example.com"
          required
          autocomplete="email"
        />
        <script type="application/json">
          {"items": ["Email 1", "Email 2", "Email 3"]}
        </script>
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
    </form>

    <h2>Attributes</h2>
    <p>no attributes</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <amp-autocomplete
        filter="substring"
        src="autocomplete-cities.example.json"
      >
        <input name="input1" required />
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
      <div submit-success>
        <template type="amp-mustache">
          Success! {{input1}}
        </template>
      </div>
    </form>

    <p>min-characters = 0</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <amp-autocomplete
        filter="substring"
        min-characters="0"
        src="autocomplete-cities.example.json"
      >
        <input name="input2" required />
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
      <div submit-success>
        <template type="amp-mustache">
          Success! {{input2}}
        </template>
      </div>
    </form>

    <p>min-characters = 3</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <amp-autocomplete
        filter="substring"
        min-characters="3"
        src="autocomplete-cities.example.json"
      >
        <input name="input3" required />
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
      <div submit-success>
        <template type="amp-mustache">
          Success! {{input3}}
        </template>
      </div>
    </form>

    <p>max-entries = 3</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <amp-autocomplete
        filter="substring"
        max-entries="3"
        src="autocomplete-cities.example.json"
      >
        <input name="input4" required />
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
      <div submit-success>
        <template type="amp-mustache">
          Success! {{input4}}
        </template>
      </div>
    </form>

    <p>max-entries = 10, min-characters = 0</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <amp-autocomplete
        filter="substring"
        max-entries="10"
        min-characters="0"
        src="autocomplete-cities.example.json"
      >
        <input type="text" name="input5" required />
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
      <div submit-success>
        <template type="amp-mustache">
          Success! {{input5}}
        </template>
      </div>
    </form>

    <p>submit-on-enter</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <amp-autocomplete
        filter="substring"
        src="autocomplete-cities.example.json"
        submit-on-enter
      >
        <input type="text" name="input6" required />
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
      <div submit-success>
        <template type="amp-mustache">
          Success! {{input6}}
        </template>
      </div>
    </form>

    <p>highlight-user-entry</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <amp-autocomplete
        filter="substring"
        src="autocomplete-cities.example.json"
        highlight-user-entry
      >
        <input type="text" name="input6" required />
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
      <div submit-success>
        <template type="amp-mustache">
          Success! {{input6}}
        </template>
      </div>
    </form>

    <p>suggest-first</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <amp-autocomplete
        filter="prefix"
        src="autocomplete-cities.example.json"
        suggest-first
      >
        <input type="text" name="input6b" required />
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
      <div submit-success>
        <template type="amp-mustache">
          Success! {{input6b}}
        </template>
      </div>
    </form>

    <p>suggest-first and submit-on-enter</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <amp-autocomplete
        filter="prefix"
        src="autocomplete-cities.example.json"
        suggest-first
        submit-on-enter
      >
        <input type="text" name="input6b" required />
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
      <div submit-success>
        <template type="amp-mustache">
          Success! {{input6b}}
        </template>
      </div>
    </form>

    <p>items</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <amp-autocomplete filter="prefix" items="fruit">
        <input type="text" name="input6c" required />
        <script type="application/json">
          {"fruit": ["apples", "bananas", "pears"]}
        </script>
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
      <div submit-success>
        <template type="amp-mustache">
          Success! {{input6c}}
        </template>
      </div>
    </form>

    <h2>Filters</h2>
    <p>substring</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <amp-autocomplete
        filter="substring"
        min-characters="0"
        src="autocomplete-cities.example.json"
        submit-on-enter
      >
        <input type="text" name="input7" required />
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
      <div submit-success>
        <template type="amp-mustache">
          Success! {{input7}}
        </template>
      </div>
    </form>

    <p>prefix</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <amp-autocomplete
        filter="prefix"
        min-characters="0"
        src="autocomplete-cities.example.json"
        submit-on-enter
      >
        <input type="text" name="input8" required />
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
      <div submit-success>
        <template type="amp-mustache">
          Success! {{input8}}
        </template>
      </div>
    </form>

    <p>token-prefix</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <amp-autocomplete
        filter="token-prefix"
        min-characters="0"
        src="autocomplete-cities.example.json"
        submit-on-enter
      >
        <input type="text" name="input9" required />
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
      <div submit-success>
        <template type="amp-mustache">
          Success! {{input9}}
        </template>
      </div>
    </form>

    <p>fuzzy</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <amp-autocomplete
        filter="fuzzy"
        min-characters="0"
        src="autocomplete-cities.example.json"
        submit-on-enter
      >
        <input type="text" name="input9" required />
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
      <div submit-success>
        <template type="amp-mustache">
          Success! {{input9}}
        </template>
      </div>
    </form>

    <p>none to inline data</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <amp-autocomplete
        filter="none"
        min-characters="0"
        [src]="manualFilterData"
        submit-on-enter
      >
        <input
          type="text"
          name="input10"
          required
          on="input-debounced:AMP.setState({ manualFilterData:
              { 'items' : [event.value + ' 1', event.value + ' 2', event.value + ' 3'] } })"
        />
        <script type="application/json">
          {"items": []}
        </script>
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
      <div submit-success>
        <template type="amp-mustache">
          Success! {{input10}}
        </template>
      </div>
    </form>

    <p>none to endpoint</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <amp-autocomplete
        filter="none"
        min-characters="0"
        src="/form/autocomplete/query"
        [src]="'/form/autocomplete/query?q=' + (query || '')"
        submit-on-enter
      >
        <input
          type="text"
          name="input11"
          required
          on="input-debounced:AMP.setState({ query: event.value })"
        />
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
      <div submit-success>
        <template type="amp-mustache">
          Success! {{input11}}
        </template>
      </div>
    </form>

    <h2>Datasources in form context</h2>
    <p>Static data</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <fieldset>
        <label>
          <span>Your favorite color (in Arabic)</span>
          <amp-autocomplete filter="substring" min-characters="0">
            <input type="text" required />
            <script type="application/json">
              {
                "items": [
                  "أبيض",
                  "أسود",
                  "أحمر",
                  "أصفر",
                  "أخضر",
                  "أزرق",
                  "بني",
                  "برتقالى"
                ]
              }
            </script>
          </amp-autocomplete> </label
        ><br />
        <label>
          <span>Your favorite color (in English)</span>
          <amp-autocomplete filter="prefix" min-characters="0">
            <input type="text" required />
            <script type="application/json">
              {
                "items": [
                  "white",
                  "black",
                  "red",
                  "yellow",
                  "green",
                  "blue",
                  "brown",
                  "orange"
                ]
              }
            </script>
          </amp-autocomplete>
        </label>
        <label>
          <span>Your favorite color (in Arabic and English)</span>
          <amp-autocomplete filter="prefix" min-characters="0">
            <input type="text" required />
            <script type="application/json">
              {
                "items": [
                  "أبيض",
                  "white",
                  "أسود",
                  "black",
                  "أحمر",
                  "red",
                  "أصفر",
                  "yellow",
                  "أخضر",
                  "green",
                  "أزرق",
                  "blue",
                  "بني",
                  "brown",
                  "برتقالى",
                  "orange"
                ]
              }
            </script>
          </amp-autocomplete>
        </label>
        <input name="submit-button" type="submit" value="Submit" />
      </fieldset>

      <div submit-success>
        <template type="amp-mustache">
          Success! Thanks {{name}} for subscribing! Please make sure to check
          your email {{email}} to confirm!
        </template>
      </div>
      <div submit-error>
        <template type="amp-mustache">
          Oops! {{name}}, We apologies something went wrong. Please try again
          later.
        </template>
      </div>
    </form>

    <p>Remote data (with small data)</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <fieldset>
        <label>
          <span>Your hometown</span>
          <amp-autocomplete
            filter="substring"
            min-characters="0"
            src="autocomplete-cities.example.json"
          >
            <input type="text" name="city" required />
          </amp-autocomplete>
        </label>
        <label>
          <span>Favorite state, defined item property</span>
          <amp-autocomplete
            filter="substring"
            min-characters="0"
            src="autocomplete-states.example.json"
            items="states"
          >
            <input type="text" name="favoriteState" required />
          </amp-autocomplete>
        </label>
        <input name="submit-button" type="submit" value="Submit" />
      </fieldset>

      <div submit-success>
        <template type="amp-mustache">
          Success! Mailing a postcard to {{city}}.
        </template>
      </div>
    </form>

    <p>
      Both data sources provided (should cause warning and display remote data)
    </p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <fieldset>
        <label>
          <span>Your hometown</span>
          <amp-autocomplete
            filter="substring"
            min-characters="0"
            src="autocomplete-cities.example.json"
          >
            <input type="text" name="city" required />
            <script type="application/json">
              {"items": ["hello a", "hello b", "hello c"]}
            </script>
          </amp-autocomplete>
        </label>
        <input name="submit-button" type="submit" value="Submit" />
      </fieldset>

      <div submit-success>
        <template type="amp-mustache">
          Success! Mailing a postcard to {{city}}.
        </template>
      </div>
    </form>

    <p>Neither data sources provided (should cause warning)</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <fieldset>
        <label>
          <span>Your hometown</span>
          <amp-autocomplete filter="substring" min-characters="0">
            <input type="text" name="city" required />
          </amp-autocomplete>
        </label>
        <input name="submit-button" type="submit" value="Submit" />
      </fieldset>

      <div submit-success>
        <template type="amp-mustache">
          Success! Mailing a postcard to {{city}}.
        </template>
      </div>
    </form>

    <p>Dynamic data, changing json path</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <fieldset>
        <label>
          <span>Your hometown</span>
          <amp-autocomplete
            filter="substring"
            min-characters="0"
            src="autocomplete-cities.example.json"
            [src]="srcUrl"
          >
            <input type="text" name="value" required />
          </amp-autocomplete>
        </label>
        <input name="submit-button" type="submit" value="Submit" /><br />
      </fieldset>

      <div submit-success>
        <template type="amp-mustache">
          Success! Mailing a postcard to {{value}}.
        </template>
      </div>
    </form>
    <button
      on="tap:AMP.setState({ srcUrl: 'autocomplete-countries.example.json' })"
    >
      Suggest countries
    </button>
    <button
      on="tap:AMP.setState({ srcUrl: 'autocomplete-cities.example.json' })"
    >
      Suggest US cities
    </button>

    <p>Dynamic data, changing json object</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <fieldset>
        <label>
          <span>Your message</span>
          <amp-autocomplete
            filter="substring"
            min-characters="0"
            [src]="srcJson"
          >
            <input type="text" name="value" required />
            <script type="application/json">
              {"items": ["hello a", "hello b", "hello c"]}
            </script>
          </amp-autocomplete>
        </label>
        <input name="submit-button" type="submit" value="Submit" /><br />
      </fieldset>

      <div submit-success>
        <template type="amp-mustache">
          Thanks for submitting "{{value}}".
        </template>
      </div>
    </form>
    <button
      on="tap:AMP.setState({ srcJson: { 'items' : ['apple', 'banana', 'coconut']} })"
    >
      Suggest fruit
    </button>
    <button
      on="tap:AMP.setState({ srcJson: { 'items' : ['hello a', 'hello b', 'hello c'] } })"
    >
      Suggest hellos
    </button>

    <p>Dynamic data, changing json path and object</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <fieldset>
        <label>
          <span>Your hometown</span>
          <amp-autocomplete
            filter="substring"
            min-characters="0"
            [src]="srcData"
          >
            <input type="text" name="value" required />
            <script type="application/json">
              {"items": ["hello a", "hello b", "hello c"]}
            </script>
          </amp-autocomplete>
        </label>
        <input name="submit-button" type="submit" value="Submit" /><br />
      </fieldset>

      <div submit-success>
        <template type="amp-mustache">
          Success! Mailing a postcard to {{value}}.
        </template>
      </div>
    </form>
    <button
      on="tap:AMP.setState({ srcData: { 'items' : ['apple', 'banana', 'coconut']} })"
    >
      Suggest fruit
    </button>
    <button
      on="tap:AMP.setState({ srcData: 'autocomplete-cities.example.json' })"
    >
      Suggest US cities
    </button>

    <h2>Templates in search context</h2>
    <p>Plain Text, Submit on enter</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <fieldset>
        <label>
          <span>Search for</span>
          <amp-autocomplete filter="token-prefix" submit-on-enter>
            <input type="search" name="term" required />
            <script type="application/json">
              {"items": ["apple", "pineapple", "coconut", "pine apple"]}
            </script>
          </amp-autocomplete>
        </label>
        <input type="submit" value="Search" />
      </fieldset>
      <div submit-success>
        <template type="amp-mustache">
          <div>Here are the results for the search: {{term}}</div>
        </template>
      </div>
    </form>

    <p>Rich Text, Template Child, Default Value Property</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <fieldset>
        <label>
          <span>Search for</span>
          <amp-autocomplete filter="token-prefix" min-characters="0">
            <input type="search" name="term" required />
            <script type="application/json">
              {
                "items": [
                  {
                    "value": "Albany, New York",
                    "areaCode": 518,
                    "population": 98251
                  },
                  {
                    "value": "Annapolis, Maryland",
                    "areaCode": 410,
                    "population": 39321
                  },
                  {
                    "value": "Trenton, New Jersey",
                    "areaCode": 609,
                    "population": 84964
                  }
                ]
              }
            </script>
            <template type="amp-mustache" id="amp-template-default">
              <div class="city-item" data-value="{{value}}">
                <div>{{value}}</div>
                <div class="custom">Population: {{population}}</div>
              </div>
            </template>
          </amp-autocomplete>
        </label>
        <input type="submit" value="Search" />
      </fieldset>
      <div submit-success>
        <template type="amp-mustache">
          <div>Here are the results for the search: {{term}}</div>
        </template>
      </div>
    </form>

    <p>Rich Text, Template Child, Custom Value Property</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <fieldset>
        <label>
          <span>Search for</span>
          <amp-autocomplete
            filter="token-prefix"
            filter-value="city"
            min-characters="0"
          >
            <input type="search" name="term" required />
            <script type="application/json">
              {
                "items": [
                  {
                    "city": "Albany",
                    "state": "New York",
                    "areaCode": 518,
                    "population": 98251
                  },
                  {
                    "city": "Annapolis",
                    "state": "Maryland",
                    "areaCode": 410,
                    "population": 39321
                  },
                  {
                    "city": "Trenton",
                    "state": "New Jersey",
                    "areaCode": 609,
                    "population": 84964
                  }
                ]
              }
            </script>
            <template type="amp-mustache" id="amp-template-custom">
              <div class="city-item" data-value="{{city}}, {{state}}">
                <div>{{city}}, {{state}}</div>
                <div class="custom">Population: {{population}}</div>
              </div>
            </template>
          </amp-autocomplete>
        </label>
        <input type="submit" value="Search" />
      </fieldset>
      <div submit-success>
        <template type="amp-mustache">
          <div>Here are the results for the search: {{term}}</div>
        </template>
      </div>
    </form>

    <p>Rich Text, Template Attribute, Default Value Property</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <fieldset>
        <label>
          <span>Search for</span>
          <amp-autocomplete
            filter="token-prefix"
            min-characters="0"
            template="amp-template-default"
          >
            <input type="search" name="term" required />
            <script type="application/json">
              {
                "items": [
                  {
                    "value": "Albany, New York",
                    "areaCode": 518,
                    "population": 98251
                  },
                  {
                    "value": "Annapolis, Maryland",
                    "areaCode": 410,
                    "population": 39321
                  },
                  {
                    "value": "Trenton, New Jersey",
                    "areaCode": 609,
                    "population": 84964
                  }
                ]
              }
            </script>
          </amp-autocomplete>
        </label>
        <input type="submit" value="Search" />
      </fieldset>
      <div submit-success>
        <template type="amp-mustache">
          <div>Here are the results for the search: {{term}}</div>
        </template>
      </div>
    </form>

    <h2>'Disabled' attribute</h2>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <amp-autocomplete filter="substring" min-characters="0">
        <input type="text" />
        <script type="application/json">
          {
            "items": [
              {"value": "apple", "disabled": "true"},
              {"value": "orange"},
              {"value": "avocado", "disabled": "true"},
              {"value": "banana"}
            ]
          }
        </script>
        <template type="amp-mustache">
          {{#disabled}}
          <div data-disabled>
            {{value}}
            <span class="out-of-stock">out of stock</span>
          </div>
          {{/disabled}} {{^disabled}}
          <div data-value="{{value}}">
            {{value}}
          </div>
          {{/disabled}}
        </template>
      </amp-autocomplete>
      <input name="submit-button" type="submit" value="Submit" />
    </form>

    <h2>Fallback</h2>
    <p>Invalid src path, fallback provided</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <fieldset>
        <label>
          Your hometown<br />
          <amp-autocomplete
            filter="substring"
            min-characters="0"
            src="autocomplete-invalid.example.json"
          >
            <input type="text" name="city" required />
            <div fallback>
              Sorry, we couldn't load suggestions.
            </div>
          </amp-autocomplete>
        </label>
        <input name="submit-button" type="submit" value="Submit" />
      </fieldset>

      <div submit-success>
        <template type="amp-mustache">
          Success! Mailing a postcard to {{city}}.
        </template>
      </div>
    </form>

    <p>Failing src path, fallback provided</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <fieldset>
        <label>
          Your hometown<br />
          <amp-autocomplete
            filter="substring"
            min-characters="0"
            src="/form/autocomplete/error"
            [src]="'/form/autocomplete/error?q=' + (queryForFallback || '')"
          >
            <input
              type="text"
              name="city"
              required
              on="input-debounced:AMP.setState({ queryForFallback: event.value })"
            />
            <div fallback>
              Sorry, we couldn't load suggestions.
            </div>
          </amp-autocomplete>
        </label>
        <input name="submit-button" type="submit" value="Submit" />
      </fieldset>

      <div submit-success>
        <template type="amp-mustache">
          Success! Mailing a postcard to {{city}}.
        </template>
      </div>
    </form>

    <p>Invalid src path, no fallback provided</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <fieldset>
        <label>
          Your hometown<br />
          <amp-autocomplete
            filter="substring"
            min-characters="0"
            src="autocomplete-invalid.example.json"
          >
            <input type="text" name="city" required />
          </amp-autocomplete>
        </label>
        <input name="submit-button" type="submit" value="Submit" />
      </fieldset>

      <div submit-success>
        <template type="amp-mustache">
          Success! Mailing a postcard to {{city}}.
        </template>
      </div>
    </form>

    <p>Failing src path, no fallback provided</p>
    <form method="post" action-xhr="/form/echo-json/post" target="_blank">
      <fieldset>
        <label>
          Your hometown<br />
          <amp-autocomplete
            filter="substring"
            min-characters="0"
            src="/form/autocomplete/error"
            [src]="'/form/autocomplete/error?q=' + (queryForFallback2 || '')"
          >
            <input
              type="text"
              name="city"
              required
              on="input-debounced:AMP.setState({ queryForFallback2: event.value })"
            />
          </amp-autocomplete>
        </label>
        <input name="submit-button" type="submit" value="Submit" />
      </fieldset>

      <div submit-success>
        <template type="amp-mustache">
          Success! Mailing a postcard to {{city}}.
        </template>
      </div>
    </form>
  </body>
</html>