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

Question

我对 AMP 电子邮件技术非常陌生，我面临着与在搜索框中呈现动态选项相关的问题，这使得根据输入字符串获取 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

您似乎正在尝试修改 src amp-list 的，但 AMP for Email 不允许绑定(bind)到 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>除非你想给你的州一个默认值。