Search code examples
searchamp-html

Search With AMP HTML Possible?


I would just love to try creating an AMP HTML website. However, what I cannot miss is our search function.

From what I understand so far, a search (input field, JavaScript handler) would not be possible with AMP HTML.

Is there any way to provide a neat search functionality within AMP HTML? Maybe using the amp-list component?


Solution

  • Forms are supported in AMP via the amp-form component. Using amp-form, you can embed a search form into your AMPs and render the search results into a new AMP on your server.

    This is a search form in 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>
    

    https://example.com/search can then render to an AMP page showing the search results:

        <html>
        <head>
          <!-- ... AMP boilerplate ... -->
        </head>
        <body>
            <h1>Results</h1>
            <ul>
               <li>Result 1</li>
               <li>Result 2</li>    
            </ul>            
        </body>
    </html>
    

    You can find a working sample for a search implemented with AMP here.