Google AMP 放大器自动完成功能

amp-autocomplete根据用户在键入时给出的输入建议完整的结果。这是一个非常常见且有用的功能，因为它使用户能够更快地完成任务。当用户不知道输入的全部范围时，这非常有用。

所需脚本：导入 amp-autocomplete 组件 –

导入 amp-form 组件 –

用法：

• amp-autocomplete 必须嵌套在表单中。
• 表单应包含带有输入标签或文本区域标签的输入字段。
• 数据源必须是包含数组属性项的 JSON 对象。
• 可以使用子脚本 type=”application/json” 标签或通过 src 标签指定数据源。

使用子脚本 type=”application/json” –

HTML

      
    
        
        
            {
                "items": ["geeksforgeeks", "gfg", 
                "iamageek" ,"how to become a geek?"]
            }
        
    

使用 src 标签 –

示例 1：

HTML

  

    
    
  
    
  
    
    
  
    
    
  
    Google AMP amp-autocomplete
  
    
        :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);
        }
    
  
    
        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
            }
        }
    
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        
    

  

    
          
        
            
  
            
            
                {
                    "items": ["geeksforgeeks", 
                    "gfg", "iamageek", 
                    "how to become a geek?"]
                }
            
        
    

  

输出

示例 2：

HTML

  

    
    
  
    
  
    
    
  
    
    
  
    Google AMP amp-autocomplete
  
    
        :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);
        }
    
  
    
        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
            }
        }
    
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        
    

  

    
          
        
        
            
        
    

  

输出