如何在 amp 邮件中使 'search box which shows list of dynamic option according to data retrieve by get api call on input string' 像 select2

Question

我是 AMP 电子邮件技术的新手，我面临一个与在搜索框中呈现动态选项相关的问题，这使得 get API 请求调用根据输入字符串作为查询并根据数据显示选项列表按要求检索。

我了解到 amp-autocomplete 在 amp-email 中不起作用，我使用了这段代码。因此，请考虑这一点并提出解决此问题的方法。

    <div>
      <amp-state id="name"></amp-state>
      <input id="name-input" placeholder="Search name..." on="input-throttled:AMP.setState({ name: event.value })">
      <amp-list layout="fixed-height" height="100" src="https://www.example.com/a/b?q='name'" items=".">
        <template type="amp-mustache">
          <div>{{name}}</div>
        </template>
      </amp-list>
    </div>

此代码显示了一个输入字段，但在上面书写时我无法获得任何列表。

“https://www.example.com/a/b?q=a”的获取请求结果给出 json 数据，如下所示 [{"id": "1", "name": "abc"} , {"id": "2", "name": "abd"}, ...]

Answer 1

您似乎在尝试修改放大器列表的 src，但用于电子邮件的 AMP 不允许绑定到 src（另外，您必须使用 [src] 而不是 src 在网络上的 AMP 中执行此操作）。

一种选择是将 amp-form 与您在调用 setState 时提交的隐藏输入字段一起使用：

<div>
  <input id="name-input" placeholder="Search name..." on="input-throttled:AMP.setState({ name: event.value }), suggestions.submit">

  <form id="suggestions" method="get" action-xhr="https://www.example.com/a/b">
    <input type="hidden" name="q" value="" [value]="name">
    <div submit-success>
      <template type="amp-mustache">
        {{#.}}
        <div>{{name}}</div>
        {{/.}}
      </template>
    </div>
  </form>
</div>

另请注意，您不需要 <amp-state> 除非您想为您的州提供默认值。

如何在 amp 邮件中使 'search box which shows list of dynamic option according to data retrieve by get api call on input string' 像 select2

How to make 'search box which shows list of dynamic option according to data retrieve by get api call on input string' like select2 in amp mail

amp-html

amp-email