我需要在有自动建议字段的地方建立AMP页面。用户输入文字时,应显示可用机场列表。
我已经尝试过以下示例:
https://ampbyexample.com/advanced/autosuggest_form/
当我静态设置数据时,一切正常,但是我需要从WordPress查询此数据。但是我需要使用[src]属性,例如:
[src]='/airports_json.json'
但这不起作用。
<amp-state id="departure_list" [src]="<?php echo get_template_directory() . '/airports_json.json';?>">
<?php echo file_get_contents( $file_airports_json );?>
</amp-state>
<label>
Departure
<input [value]="departure"
on="input-debounced: AMP.setState({
filteredDeparture: event.value.length == 0 ?
[]:
departure_list.filter(departure =>
departure.toLowerCase().indexOf(event.value.toLowerCase()) >= 0
)
})">
</label>
<amp-selector on="select:AMP.setState({
departure: event.targetOption,
filteredDeparture: []
})"
keyboard-select-mode="focus">
<amp-list id="auto-suggest"
items="."
layout="fixed-height"
height="0"
[src]="filteredDeparture"
[height]="filteredDeparture.length * 34">
<template type="amp-mustache">
<div option="{{.}}">{{.}}</div>
</template>
</amp-list>
</amp-selector>
我希望amp状态会填充src属性中的大数据,但实际上并非如此。我也尝试使用WordPress REST API处理JSON数据,例如
/wp-json/wp/v2/posts