Related Articles

Related Articles

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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script async custom-element="amp-autocomplete" 
              src=
</script>

chevron_right


Importing the amp-form component.

filter_none

edit
close

play_arrow

link
brightness_4
code

<script async custom-element="amp-form" 
         src=
</script>

chevron_right


Specifying query parameters:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<form class="sample-form"
  method="post"
  target="_top">
  <amp-autocomplete filter="none"
    min-characters="1"
    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>

chevron_right


Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html ⚡>
    <head>
        <meta charset="utf-8" />
        <link rel="canonical" 
              href=
        <meta name="viewport" 
              content="width=device-width, 
                       minimum-scale=1
                       initial-scale=1" />
        <script async custom-element="amp-autocomplete" 
                src=
      </script>
        <script async custom-element="amp-form" 
                src=
      </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=
      </script>
        <script async custom-template="amp-mustache"
                src=
      </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=
                              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>

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up
Recommended Articles
Page :