使用POST方法在AMP中自动完成

时间:2018-06-25 12:51:25

标签: ruby-on-rails ruby amp-html google-amp

我在AMP页面有问题。我想用 AutoComplete 列表选择来构建页面,例如 jquery AutoComplete

Amp给出“自动完成选择”示例。但有一个问题。在此示例中,我具有具有POST方法的API ,但我不知道如何使用其他来源在其中设置请求方法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>

0 个答案:

没有答案