How to make 'search box which shows list of dynamic option according to data retrieve by get api call on input string' like select2 in amp mail

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.

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.

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"}, ...]

Solution

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

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>

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