我在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>