如何使用amp-list,amp-mustache,amp-form和amp-bind实现自动建议?
想为页面内搜索实现autosuggest
已经研究过此Google example
希望autosuggest
以这种格式在一页上找到美国州首府
<div id='4'>Little Rock is ...</div>
我们的JSON结构如下
{
"items": [{
"query": "",
"results": [{"Montgomery, Alabama","id='1'"},
{"Juneau, Alaska","id='2'"},
{"Phoenix, Arizona","id='3'"},
{"Little Rock, Arkansas","id='4'"}]
}]
}
已实施了MCV(最小,完整,可验证)example here
如何根据结果列表中的选择修改示例以导航到页面上的特定项目?
答案 0 :(得分:2)
这是您需要做的快速摘要
#2
看起来像这样
{{#results}}
<div
class='select-option no-outline'
role='option'
tabindex='0'
on='tap:autosuggest-list.hide,{{id}}.scrollTo'
option='{{title}}'
>{{title}}</div>
{{/results}}
这是特定的构建过程(步骤A – D)
A。 HTML和AMP代码:
server endpoint
https://example.com/state_capitals/query
amp-form
<form
method='post'
action-xhr='https://example.com/state_capitals'
target='_blank'
id='search-form'
on='submit:autosuggest-list.hide;submit-success:results.show'
autocomplete='off'
>
HTML input
<div class='search-container'>
<input
id='query'
name='query'
type='text'
class='search-box'
on="input-debounced:AMP.setState({
query: event.value,
autosuggest: event.value
}),
autosuggest-list.show,
results.hide"
[value]="query || ''"
/>
<button class='search-submit' type='submit'>Search</button>
</div>
以上代码集输入框
amp-list
接下来,将来自'/state_capitals/query'
端点的结果绑定到amp-list
和amp-selector
组件,如下所示:
<amp-list
class='autosuggest-box'
layout='fixed-height'
height='120'
src='/state-capitals/query'
[src]="'/state-capitals/query?q=' + (autosuggest || '')"
id='autosuggest-list'
hidden
>
amp-list组件的来源来自/state-capitals/query
格式为JSON
的结果。
JSON endpoint structure
{"items":[{
"query": "",
"results": [
{"title": "Little Rock, Arkansas", "id":"4"},
{"title": "Olympia, Washington", "id":"47"},
{"title": "Charleston, West Virginia", "id":"48"},
{"title": "Madison, Wisconsin", "id":"49"},
...
]}]}
amp-template
使用amp-mustache
组件打印JSON格式的结果。
<amp-list ...>
<template type='amp-mustache'>
{{#results}}
<amp-selector
keyboard-select-mode='focus'
layout='container'
on='select:AMP.setState({query: event.targetOption}),
autosuggest-list.hide,{{id}}.scrollTo'
>
<div
class='select-option no-outline'
role='option'
tabindex='0'
on='tap:autosuggest-list.hide'
option='{{title}}'
>{{title}}</div>
{{/results}}
</amp-selector>
</template>
</amp-list>
有关amp-selector
和on=
的简要说明
以下代码:
on='select:AMP.setState({
query: event.targetOption}),
autosuggest-list.hide,{{id}}.scrollTo'
将滚动到:
{{id}}.scrollTo
例如,表的行ID为107
<li><a href="1">Montgomery</a></li>
<li><a href="2">Juneau</a></li>
<li><a href="3">Phoenix</a></li>
<li><a href="4">Little Rock</a></li>
B。端点实施
Data = [
{"title": "Little Rock, Arkansas", "id":"4"},
...
{"title": "Olympia, Washington", "id":"47"},
{"title": "Charleston, West Virginia", "id":"48"},
{"title": "Madison, Wisconsin", "id":"49"},
];
app.use('/state_capitals/query', (req, res) => {
assertCors(req, res, ['GET']);
const MAX_RESULTS = 4;
const query = req.query.q;
if (!query) {
res.json({
items: [{
query: "",
results: capitals.slice(0, MAX_RESULTS)
}]
});
} else {
const lowerCaseQuery = query.toLowerCase();
const filtered = capitals.filter(function(e) {return e.title.toLowerCase().includes(lowerCaseQuery)});
res.json({
items: [{
query: "",
results: filtered.slice(0, MAX_RESULTS)
}]
});
}
});
C。 NGINX设置
Node.js应用程序在域<…>和指定端口上运行。
当用户在浏览器中运行您的网站时,请Nginx将端口号80的所有流量转发到指定的端口。这是通过使用conf文件中的位置设置来完成的
location /state_capitals/ {
proxy_pass http://domain:3002/;
}
D:实施