Как сделать "окно поиска, которое показывает список динамических опций в соответствии с данными, полученными при вызове get api для входной строки", как select2 в amp mail

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>

Этот код показывает поле ввода, но при записи в него я не могу получить список.

Результат запроса get " https://www.example.com/a/b?q=a" дает данные json, подобные этим [{"id": "1", "name": "abc"}, {"id": "2", "name": "abd"}, ...]

Answer 1

Вы, кажется, пытаетесь изменить src списка усилителей, но AMP для электронной почты не разрешает привязку к 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> если вы не хотите, чтобы ваш штат по умолчанию.