如何使用amp-list,amp-mustache,amp-form和amp-bind实现autosuggest?

时间:2018-07-16 13:12:33

标签: node.js json amp-html

如何使用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

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

1 个答案:

答案 0 :(得分:2)

这是您需要做的快速摘要

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

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

    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-listamp-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-selectoron=的简要说明 以下代码:

    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