1

amp-autocomplete尝试通过在选择时重定向到 url 创建实时搜索。

    <!DOCTYPE html>
    <html ⚡&gt;
      <head>
        <meta charset="utf-8" />
        <link rel="canonical" href="self.html" />
        <meta name="viewport" content="width=device-width,minimum-scale=1" />
        <style amp-boilerplate>
          body {
            -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            animation: -amp-start 8s steps(1, end) 0s 1 normal both;
          }
          @-webkit-keyframes -amp-start {
            from {
              visibility: hidden;
            }
            to {
              visibility: visible;
            }
          }
          @-moz-keyframes -amp-start {
            from {
              visibility: hidden;
            }
            to {
              visibility: visible;
            }
          }
          @-ms-keyframes -amp-start {
            from {
              visibility: hidden;
            }
            to {
              visibility: visible;
            }
          }
          @-o-keyframes -amp-start {
            from {
              visibility: hidden;
            }
            to {
              visibility: visible;
            }
          }
          @keyframes -amp-start {
            from {
              visibility: hidden;
            }
            to {
              visibility: visible;
            }
          }
        </style>
        <noscript
          ><style amp-boilerplate>
            body {
              -webkit-animation: none;
              -moz-animation: none;
              -ms-animation: none;
              animation: none;
            }
          </style></noscript
        >
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
        <script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script>
        <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
      </head>
      <body>
        <form class="sample-form" method="post" target="_top" action-xhr="https://amp.dev/documentation/examples/api/echo">
          <label>
            <span>Search for</span>
            <amp-autocomplete filter="token-prefix" filter-value="h1" min-characters="2" on="select:AMP.navigateTo(url=event.value, target=_blank)">
              <input type="search" name="h1" />
              <script type="application/json">
                {
                  "items": [
                    {
                      "h1": "page1",
                      "url": "https://stackoverflow.com/"
                    },
                    {
                      "h1": "page2",
                      "url": "https://google.com/"
                    },
                    {
                      "h1": "page3",
                      "url": "https://amp.dev/"
                    }
                  ]
                }
              </script>
              <template type="amp-mustache" id="amp-template-custom">
                <div class="slug-item" data-value="{{url}}">
                  <span class="autocomplete-link">{{h1}}</span>
                </div>
              </template>
            </amp-autocomplete>
          </label>
        </form>
      </body>
    </html>

在上面的选项选择片段中，页面已成功重定向到{{url}}，问题是输入值也更改{{url}}为：

在此处输入图像描述

我如何{{h1}}在选项选择的输入中使用值，但留下data-value="{{url}}"小胡子，所以on="select:AMP.navigateTo(url=event.value)"仍然可以工作？

试图合并值amp-mustache并在之后拆分它，但卡住了：

<template type="amp-mustache" id="amp-template-custom">
   <div class="slug-item" data-value="{{h1}},{{url}}">
      <span class="autocomplete-link">{{h1}}</span>
   </div>
</template>

on="select:AMP.navigateTo(url=event.value.split(',')[1], target=_blank)"
4

0 回答 0