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

问题描述

我是AMP电子邮件技术的新手，我面临一个与在搜索框内呈现动态选项有关的问题，该问题使得根据输入字符串进行查询以获取API请求调用，并根据根据请求获取的数据显示选项列表.

I am very new in AMP Email technology and I am facing an issue related to render dynamic options inside search box which makes get API request call as query according to input string and show options list according to data retrieve by request.

我知道amp-autocomplete在amp-email中不起作用，我使用此代码.因此，请考虑一下并提出解决此问题的方法.

I came to know that amp-autocomplete is not working in amp-email and I use this code. So, please consider this and suggest a way how to solve this problem.

    <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>

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

This code shows a input field but on writing on it I can't get any list.

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

Result of get request of "https://www.example.com/a/b?q=a" gives json data like this [{"id": "1", "name": "abc"}, {"id": "2", "name": "abd"}, ...]

推荐答案

您似乎正在尝试修改amp-list的src，但是AMP for Email不允许绑定到src(此外，您必须在网络上的AMP中使用[src]而不是src.

You seem to be trying to modify the src of an amp-list, but AMP for Email doesn't allow binding to src (also, you'd have to use [src] instead of src to do this in AMP on the web).

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

One option is to use amp-form with a hidden input field that you submit as soon as you call 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>.

Also note that you don't need <amp-state> unless you want to give your state a default value.

这篇关于如何制作“根据输入字符串上的api调用获取api检索到的数据显示动态选项列表的搜索框"，如amp邮件中的select2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！