使用AMP HTML搜索可能吗?

Sim*_*ger 4 search amp-html

我只是想尝试创建一个AMP HTML网站.但是,我不能错过的是我们的搜索功能.

据我所知,到目前为止,使用AMP HTML无法进行搜索(输入字段,JavaScript处理程序).

有没有办法在AMP HTML中提供整洁的搜索功能?也许使用amp-list组件?

Seb*_*enz 7

AMP通过放大器组件支持表单.使用放大器形式,您可以将搜索表单嵌入AMP中,并将搜索结果渲染到服务器上的新AMP中.

这是AMP中的搜索表单:

    <html>
    <head>
      <script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
      <!-- ... AMP boilerplate ... -->
    </head>
    <body>
        <form method="get" action="https://example.com/search" target="_top">
          <input name="search" type="search">
          <input type="submit" value="">
        </form>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

然后,https://example.com/search可以呈现为显示搜索结果的AMP页面:

    <html>
    <head>
      <!-- ... AMP boilerplate ... -->
    </head>
    <body>
        <h1>Results</h1>
        <ul>
           <li>Result 1</li>
           <li>Result 2</li>    
        </ul>            
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

您可以在此处找到使用AMP实现的搜索的工作示例.