How to check if search input is received in Google AMP ?

Last Updated : 01 Oct, 2020

We can check if a search is received in AMP with the help of amp-autocomplete which can be used to check the specified query parameters with the help of src and query attribute

eg. if a src="https://www.iamageek.org/" and query="q", then a user who types in geek will get the fetch JSON result from https://iamageek.com?q=geek

When the query attribute is paired with the src attribute then user inputs are passed to a statically generated endpoint.

Script Required:

Importing the amp-autocomplete component.

<script async custom-element="amp-autocomplete" 
              src= 
"https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"> 
</script>

Importing the amp-form component.

<script async custom-element="amp-form" 
         src= 
"https://cdn.ampproject.org/v0/amp-form-0.1.js"> 
</script> 

Specifying query parameters:

The input is given trough the input tag and is queried using the template tag when submitted

<form class="sample-form"
  method="post"
  action-xhr="https://amp.dev/documentation/examples/api/echo"
  target="_top"> 
  <amp-autocomplete filter="none"
    min-characters="1"
    src="https://amp.dev/samples_templates/products_autosuggest"
    query="q"> 
    <input type="search"
      name="queryInput"> 
  </amp-autocomplete> 
  <input type="submit"
    value="Search"> 
  <div submit-success> 
    <template type="amp-mustache"> 
      Success! Received <strong>{{queryInput}}</strong>. 
    </template> 
  </div> 
</form>

Example:

<!DOCTYPE html> 
<html ⚡> 
    <head> 
        <meta charset="utf-8" /> 
        <link rel="canonical" 
              href= 
"https://amp.dev/documentation/examples/components/amp-autocomplete/index.html" /> 
        <meta name="viewport" 
              content="width=device-width,  
                       minimum-scale=1,  
                       initial-scale=1" /> 
        <script async custom-element="amp-autocomplete" 
                src= 
"https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"> 
      </script> 
        <script async custom-element="amp-form" 
                src= 
"https://cdn.ampproject.org/v0/amp-form-0.1.js"> 
      </script> 
        <title>geeksforgeeks | amp-autocomplete</title> 
        <style amp-custom> 
            :root { 
                --space-1: 0.5rem; 
                --space-3: 1.5rem; 
                --space-4: 2rem; 
                --color-text-light: #fff; 
                --color-primary: #005af0; 
                --box-shadow-1: 0 1px 1px 0 rgba(0, 0, 0, 0.14),  
                  0 1px 1px -1px rgba(0, 0, 0, 0.14),  
                  0 1px 5px 0 rgba(0, 0, 0, 0.12); 
            } 
  
            .sample-form input[type="submit"] { 
                -webkit-appearance: none; 
                border: none; 
                background-color: var(--color-primary); 
                color: var(--color-text-light); 
                margin: var(--space-2); 
                font-family: "Poppins", sans-serif; 
                font-weight: 700; 
                line-height: 1.2em; 
                font-size: 1em; 
                padding: 0.75em 1.75em; 
                text-decoration: none; 
                text-align: center; 
                border-radius: 3px; 
                border: none; 
                box-shadow: var(--box-shadow-1); 
            } 
            .sample-form { 
                padding: var(--space-2); 
            } 
        </style> 
        <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-template="amp-mustache"
                src= 
      "https://cdn.ampproject.org/v0/amp-mustache-0.2.js"> 
      </script> 
    </head> 
    <body> 
        <form class="sample-form" 
              method="post" 
              action-xhr= 
              "https://amp.dev/documentation/examples/api/echo" 
              target="_top"> 
            <amp-autocomplete filter="none" 
                              min-characters="1"
                              src= 
       "https://amp.dev/samples_templates/products_autosuggest"
                              query="q"> 
                <input type="search" 
                       name="queryInput" /> 
            </amp-autocomplete> 
            <input type="submit"
                   value="Search" /> 
            <div submit-success> 
                <template type="amp-mustache"> 
                  Success! Received 
                  <strong>{{queryInput}}</strong>. 
              </template> 
            </div> 
        </form> 
    </body> 
</html> 

Output:

My Personal Notes

Related Articles