Автозаполнение в AMP методом POST - PullRequest
Новая
       13

Автозаполнение в AMP методом POST

0 голосов
/ 25 июня 2018

У меня проблема на странице AMP. Я хочу создать страницу с автозаполнением выбора списка, например jquery AutoComplete .

Amp дают пример для выбора автозаполнения. Но есть проблема. У меня API с методом POST , в этом примере я не знаю, как установить в нем метод запроса Post с другим origin . 

  <div class="form-item city-state">
        <label>City</label>
        <input name="city"
          type="text"
          on="
            input-debounced:
              AMP.setState({
                query: event.value,
                showDropdown: event.value,
              }),
              autosuggest-list.show;
            tap:
              AMP.setState({
                query: query == null ? '' : query,
                showDropdown: 'true'
              }),
              autosuggest-list.show"
          [value]="query || ''"
          value=""
          required
          autocomplete="off" />
      </div>
      <div class="suggest">
        <div class="autosuggest-container hidden"
          [class]="(showDropdown && query) ?
            'autosuggest-container' :
            'autosuggest-container hidden'">
          <amp-list class="autosuggest-box"
            layout="fixed-height"
            height="120"
            src="/advanced/autosuggest/search_list"
            [src]="query ?
              autosuggest.endpoint + query :
              autosuggest.emptyAndInitialTemplateJson"
            id="autosuggest-list">
            <template type="amp-mustache">
              <amp-selector id="autosuggest-selector"
                keyboard-select-mode="focus"
                layout="container"
                on="
                  select:
                    AMP.setState({
                      query: event.targetOption,
                      showDropdown: false
                    }),
                    autosuggest-list.hide">
                {{#results}}
                <div class="select-option no-outline"
                  role="option"
                  tabindex="0"
                  on="tap:autosuggest-list.hide"
                  option="{{.}}">{{.}}</div>
                {{/results}} {{^results}}
                <div class="select-option {{#query}}empty{{/query}}">
                  {{#query}}Sorry! We don't ship to your city ?{{/query}}
                </div>
                {{/results}}
              </amp-selector>
            </template>
          </amp-list>
        </div>
      </div>


<amp-state id="autosuggest">
  <script type="application/json">
    {
      "endpoint": "/advanced/autosuggest/search_list?q=",
      "emptyAndInitialTemplateJson": [{
        "query": "",
        "results": []
      }]
    }
  </script>
</amp-state>
...