如何像amp mail中的select2那样制作“根据输入字符串上的get api调用检索到的数据显示动态选项列表的搜索框”

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“的get请求结果给出了如下的json数据{"id"："1"，"name"："abc"}，{"id"："2"，"name"："abd"}，...

Answer 1

你似乎正在尝试修改一个AMP列表的src，但是用于电子邮件的AMP不允许绑定到src (而且，你必须使用[src]而不是src来做这件事)。

一种选择是使用带有隐藏输入字段的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>。