2

我在 AMP 页面中遇到问题。我想构建一个带有自动完成列表选择的页面，比如jquery AutoComplete。

Amp 给出了自动完成选择的示例。但有一个问题。在这个例子中我有带有 POST 方法的 API我不知道如何在其中使用不同的origin设置 Request 方法 Post 。

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

0 回答 0