3

我是 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 ”的获取请求的结果给出了这样的 json 数据 [{"id": "1", "name": "abc"}, {" id": "2", "name": "abd"}, ...]

4

1 回答 1

2

您似乎正在尝试修改srcamp-list，但 AMP for Email 不允许绑定到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>另请注意，除非您想为您的状态提供默认值，否则您不需要。

于 2019-07-24T13:58:55.027 回答