Google AMP amp-autocomplete

Опубликовано: 12 Апреля, 2022

Amp-autocomplete предлагает полные результаты в соответствии с вводом, введенным пользователем при вводе. Это очень распространенная и полезная функция, поскольку она позволяет пользователям быстрее выполнять задачи. Это чрезвычайно полезно, когда пользователь не знает полного диапазона ввода.

Required Scripts: Import the amp-autocomplete component –

HTML

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

Импортируйте компонент amp-form -

HTML

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

Использование:

  • amp-autocomplete должен быть вложен в форму.
  • Форма должна содержать поле ввода с тегом ввода или тегом textarea.
  • Источник данных должен быть объектом JSON, содержащим элемент свойства массива.
  • Источник данных может быть указан с помощью тега дочернего скрипта type = ”application / json” или указан с помощью тега src.

Using child script type=”application/json” – 

HTML

<form class="sample-form" method="post" 
    action-xhr=
"https://amp.dev/documentation/examples/api/echo"
    target="_top">
      
    <amp-autocomplete filter="substring">
        <input>
        <script type="application/json">
            {
                "items": ["geeksforgeeks", "gfg", 
                "iamageek" ,"how to become a geek?"]
            }
        </script>
    </amp-autocomplete>
</form>

Using src tag –

HTML

<form class="sample-form" method="post" 
    action-xhr=
"https://amp.dev/documentation/examples/api/echo"
    target="_top">
      
    <!--the following src link contains 
        names of cities-->
    <amp-autocomplete filter="substring" 
src="/static/samples/json/amp-autocomplete-cities.json">
        <input>
    </amp-autocomplete>
</form>

 

Example 1:

HTML

<!doctype html>
<html amp>
  
<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>Google AMP amp-autocomplete</title>
  
    <style amp-custom>
        :root {
            --space-1: .5rem;
            /* 8px */
            --space-2: 1rem;
            /* 16px */
            --space-3: 1.5rem;
            /* 24px */
            --space-4: 2rem;
            /* 32px */
        }
  
        .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>
</head>
  
<body>
    <form class="sample-form" method="post"
        action-xhr=
"https://amp.dev/documentation/examples/api/echo"
        target="_top">
          
        <amp-autocomplete filter="substring">
            <input>
  
            <!-- Auto suggestion strings 
                stored in item-->
            <script type="application/json">
                {
                    "items": ["geeksforgeeks", 
                    "gfg", "iamageek", 
                    "how to become a geek?"]
                }
            </script>
        </amp-autocomplete>
    </form>
</body>
  
</html>

Output

Example 2:

HTML

<!doctype html>
<html amp>
  
<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>Google AMP amp-autocomplete</title>
  
    <style amp-custom>
        :root {
            --space-1: .5rem;
            /* 8px */
            --space-2: 1rem;
            /* 16px */
            --space-3: 1.5rem;
            /* 24px */
            --space-4: 2rem;
            /* 32px */
        }
  
        .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>
</head>
  
<body>
    <form class="sample-form" method

РЕКОМЕНДУЕМЫЕ СТАТЬИ