2

I have a problem in AMP page. I want to build a page with AutoComplete list selection like jquery AutoComplete.

Amp give Example for Autocomplete Selection. But there is a problem. I have API with POST Method in this example I don't know how to set Request method Post in it with a different 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>
Bachcha Singh
  • 3,850
  • 3
  • 24
  • 38
vipin
  • 2,374
  • 1
  • 19
  • 36

0 Answers0