如何制作"搜索框，根据通过获取输入字符串上的api调用检索的数据显示动态选项列表"，例如amp邮件中的select2

Question

我对 AMP 电子邮件技术非常陌生，我遇到了与搜索框中呈现动态选项相关的问题，该问题使获取 API 请求调用为根据输入字符串查询并根据请求检索的数据显示选项列表。

我

开始知道 amp 自动完成在 amp 电子邮件中不起作用，我使用此代码。因此，请考虑这一点并提出解决此问题的方法。

    <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 数据 [

Answer 1

您似乎正在尝试修改 AMP 列表的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>。