node.js - 如何使用 amp-list、amp-mustache、amp-form 和 amp-bind 实现自动建议？

Question

如何使用 amp-list、amp-mustache、amp-form 和 amp-bind 实现自动建议？

想要为页内搜索实现自动建议

研究过这个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

如何修改示例以根据结果列表中的选择导航到页面上的特定项目？

Answer 1

以下是您需要执行的操作的快速摘要

1。创建一个过滤结果的服务器端点。确保它具有适当的 CORS header 。

2。使用来自 JSON 端点的 ID 和数字 ID 渲染自动建议项

3。将 ID 放在您的每个标签或

标签上。

#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 代码:

服务器端点 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 输入

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

以上代码设置输入框

放大器列表接下来，将 '/state_capitals/query' 端点的结果绑定(bind)到 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 端点结构

{"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 模板使用 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.端点实现

1。将 JSON 对象数据声明为:

Data = [
  {"title": "Little Rock, Arkansas", "id":"4"},
  ...
  {"title": "Olympia, Washington", "id":"47"},
  {"title": "Charleston, West Virginia", "id":"48"},
  {"title": "Madison, Wisconsin", "id":"49"},
];

2。实现一个 Node.js 服务器

app.use('/state_capitals/query', (req, res) => {
  assertCors(req, res, ['GET']);
  const MAX_RESULTS = 4;
  const query = req.query.q;

3。应用node.js脚本

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:实现

Here is a working version