From 62501390f0937fa70fb4dadf59c1b9d7a8205fcf Mon Sep 17 00:00:00 2001
From: Caroline Liu <10456171+caroqliu@users.noreply.github.com>
Date: Wed, 21 Jul 2021 09:41:00 -0400
Subject: [PATCH] `amp-autocomplete`: Fix email-specific code samples (#35305)

* amp-autocomplete email code samples

* Include json data
---
 .../amp-autocomplete/amp-autocomplete.md      | 65 ++++++++++++++++++-
 1 file changed, 62 insertions(+), 3 deletions(-)

diff --git a/extensions/amp-autocomplete/amp-autocomplete.md b/extensions/amp-autocomplete/amp-autocomplete.md
index 08ed09e957d3..359e9897f363 100644
--- a/extensions/amp-autocomplete/amp-autocomplete.md
+++ b/extensions/amp-autocomplete/amp-autocomplete.md
@@ -155,7 +155,11 @@ The max specified number of items to suggest at once based on a user input, disp
 
 ### `suggest-first`
 
-Suggest the first entry in the list of results by marking it active; only possible if <code>filter==prefix</code> (does nothing otherwise)
+Suggest the first entry in the list of results by marking it active.
+
+[filter formats="websites"]
+This is only possible if <code>filter==prefix</code> (does nothing otherwise).
+[/filter] <!-- formats="websites" -->
 
 ### `submit-on-enter`
 
@@ -171,6 +175,8 @@ If present, exposes the <code>autocomplete-partial</code> class on the substring
 
 Specifies the key to the data array within the JSON response. Nested keys can be expressed with a dot-notated value such as <code>field1.field2.</code> The default value is <code>"items"</code>. The following are examples with and without usage:
 
+[filter formats="websites"]
+
   <pre lang="html">
 
       <amp-autocomplete filter="prefix">
@@ -187,12 +193,42 @@ Specifies the key to the data array within the JSON response. Nested keys can be
       <amp-autocomplete filter="prefix" items="fruit">
         <input type="text">
         <script type=application/json>
-          { "fruit" : ["apples", "bananas", "pears"] }
+          { "fruit" : ["kiwis", "oranges", "watermelons"]  }
           </script>
       </amp-autocomplete>
 
   </pre>
-      In the first example, the JSON payload is queued by the "items" key, and thus no component attribute is needed because the default value corresponds. In the second example, the JSON payload is queued by the "fruit" key, so the <code>items</code> attribute is given the value <code>"fruit"</code> so as to accurately etrieve the intended datasource. In both examples, the end user interaction is the same.
+[/filter] <!-- formats="websites" -->
+
+[filter formats="email"]
+
+Note that the following data is returned by the remote `src`:
+
+  <pre lang="json">
+    { 
+      "items" : ["apples", "bananas", "pears"], 
+      "fruit" : ["kiwis", "oranges", "watermelons"] 
+    }
+  </pre>
+
+  <pre lang="html">
+
+      <amp-autocomplete src="{{server_for_email}}/static/samples/json/amp-autocomplete-fruit-items.json">
+        <input type="text">
+      </amp-autocomplete>
+
+  </pre>
+  <pre lang="html">
+
+      <amp-autocomplete src="{{server_for_email}}/static/samples/json/amp-autocomplete-fruit-items.json" items="fruit">
+        <input type="text">
+      </amp-autocomplete>
+
+  </pre>
+
+[/filter] <!-- formats="email" -->
+
+In the first example, the JSON payload is queued by the "items" key, and thus no component attribute is needed because the default value corresponds. In the second example, the JSON payload is queued by the "fruit" key, so the <code>items</code> attribute is given the value <code>"fruit"</code> so as to accurately retrieve the intended datasource. In both examples, the end user interaction is the same.
 
 ### `inline`
 
@@ -219,6 +255,7 @@ representation of the corresponding object, which is then made available in
 the `valueAsObject` field of the `event`.
 
 Example:
+[filter formats="websites"]
 
 ```html
 <amp-autocomplete
@@ -246,6 +283,28 @@ Example:
 </p>
 ```
 
+[/filter] <!-- formats="websites" -->
+
+[filter formats="email"]
+
+```html
+<amp-autocomplete
+  id="myAutocomplete"
+  on="select:AMP.setState({chosenFruit: event.value})"
+  src="{{server_for_email}}/static/samples/json/amp-autocomplete-fruit.json"
+>
+  <input />
+  <template type="amp-mustache">
+    <div data-value="{{name}}">{{name}}</div>
+  </template>
+</amp-autocomplete>
+<p [text]="'Your fruit: ' + chosenFruit">
+  No fruit selected
+</p>
+```
+
+[/filter] <!-- formats="email" -->
+
 ## Validation
 
 See [amp-autocomplete rules](validator-amp-autocomplete.protoascii) in the AMP validator specification.