如何在 Google AMP 中搜索时自动推荐丰富的内容？

站点中的大多数自动建议都是普通字符串，但有时用户会寻找更多这样的内容，这将成为有用的丰富内容自动建议，提供更多信息和清晰度。 Google AMP 使开发人员可以通过 amp-autocomplete 更轻松地使用此选项。

所需的脚本：
• 导入 amp-autocomplete 组件。

• 导入 amp-form 组件。

为了使用 amp-autocomplete 建议丰富的内容，我们将数据 s 传递到项目中的 JsonObjects 数组中，如下所示

{ "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
    }
] }

这些数据的显示是通过一个模板给出的，如下所示

例子：

    
        
        
        
        
      
        
      
        geeksforgeeks | amp-autocomplete
      
        
            :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);
            }
        
        
            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;
                }
            
        
        
      
        
      
    
    
        
            
                Search for
                
                    
                    
                        {
                            "items": [
                                {
                                    "city": "kochi",
                                    "state": "kerala",
                                    "population": 2120000
                                },
                                {
                                    "city": " hyderabad",
                                    "state": "telangana",
                                    "population": 6810000
                                },
                                {
                                    "city": "surat",
                                    "state": "gujarat",
                                    "population": 4460000
                                }
                            ]
                        }
                    
                    
                
            
            
            
                
            
            
                Error!
            
        
    

输出：