Open In App

How to auto suggest rich contents while searching in Google AMP ?

Improve
Improve
Like Article
Like
Save
Share
Report

Most of the auto-suggestions in sites would be normal strings but sometimes users look for more that, s, where this becomes useful rich content auto-suggestions, provide more information and clarity. Google AMP makes it easier for developers to use this option using amp-autocomplete.

To Suggest rich contents using amp-autocomplete we pass the data, s into an array of JsonObjects in items as given below




{ "items" : [
    {
        "city" : "Albany",
        "state" : "New York", 
        "areaCode" : 518,
        "population" : 98251
    }, {
        "city" : "Annapolis",
        "state" : "Maryland",
        "areaCode" : 410,
        "population" : 39321
    }, {
        "city" : "Trenton",
        "state" : "New Jersey",
        "areaCode" : 609,
        "population" : 84964
    }
] }


Display of these data are given through a template as given below




<template type="amp-mustache" id="amp-template-custom">
  <div class="city-item" data-value="{{city}}, {{state}}">
      <div>{{city}}, {{state}}</div>
      <div class="custom-population">Population: {{population}}</div>
  </div>
</template>


Example:




<!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="https://cdn.ampproject.org/v0.js">
      </script>
        <script async custom-template="amp-mustache" 
                src=
      </script>
    </head>
    <body>
        <form class="sample-form"
              method="post" 
              action-xhr=
            <label>
                <span>Search for</span>
                <amp-autocomplete filter="token-prefix" 
                                  filter-value="city"
                                  min-characters="0">
                    <input type="search" name="city" />
                    <script type="application/json">
                        {
                            "items": [
                                {
                                    "city": "kochi",
                                    "state": "kerala",
                                    "population": 2120000
                                },
                                {
                                    "city": " hyderabad",
                                    "state": "telangana",
                                    "population": 6810000
                                },
                                {
                                    "city": "surat",
                                    "state": "gujarat",
                                    "population": 4460000
                                }
                            ]
                        }
                    </script>
                    <template type="amp-mustache"
                              id="amp-template-custom">
                        <div class="city-item" 
                             data-value="{{city}}, {{state}}">
                            <div>{{city}}, {{state}}</div>
                            <div class="custom-population">
                                Population: {{population}}
                            </div>
                        </div>
                    </template>
                </amp-autocomplete>
            </label>
            <input type="submit" value="Search" />
            <div submit-success>
                <template type="amp-mustache">
                    Successfully submitted {{city}}!
                </template>
            </div>
            <div submit-error>
                Error!
            </div>
        </form>
    </body>
</html>


Output:



Last Updated : 01 Oct, 2020
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads