CSS 如何在谷歌AMP中搜索时自动提示丰富的内容

为了实现在输入字段时向用户自动推荐丰富的内容，我们将使用谷歌AMP框架的 “amp-autocomplete “脚本。自动完成一个输入字段意味着在用户开始输入时向用户推荐相关内容。

让我们用一个例子来讨论这个方法，如下所示

方法

我们将使用 “amp-autocomplete “脚本，在我们的网页上添加自动建议的丰富内容。我们还将使用谷歌AMP框架中的 “amp-form “脚本，以便使用其amp-form组件并在用户界面中显示，并使用 “amp-mustache “为我们提供模板以在网页中使用。

这里使用的脚本

加载amp-autocomplete的脚本 –

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

这个脚本用于加载amp-autocomplete功能，帮助我们在网页上添加自动提示的丰富内容。

加载amp-form的脚本 –

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

这个脚本用于加载Google AMP框架的amp-form组件，然后我们可以在我们的应用程序中使用该组件。

加载amp-project的脚本 –

<script async src="https://cdn.ampproject.org/v0.js"></script>

这个脚本用于加载amp-project，使我们能够使用Google AMP框架的不同功能。

加载amp-mustache的脚本 –

<script async custom-template="amp-mustachesrc="https://cdn.ampproject.org/v0/amp-mustache-0.2.js">

这个脚本是用来加载amp-mustache模板的，它允许我们在HTML文件中使用模板工作。

我们将采取一个复杂的数据例子，如下面的JSON对象，并使用这些数据传递给amp-autocomplete，以给出建议的结果。

使用的JSON对象 –

{
   "items": [
      {
         "name": "Luffy",
         "country": "India"
      },{
         "name": "Nami",
         "country": "USA"
      },{
         "name": "Zoro",
         "country": "Canada"
      }
   ]
}

然后，我们将使用amp-form组件，并将JSON对象送入那里，给我们提供自动建议的结果。我们将使用AMP mustache模板的格式，如下所示

<template type="amp-mustache" id="amp-template-custom">
   <div data-value="{{name}}, {{country}}">
      {{name}}, {{country}}
   </div>
</template>

例子

我们的index.html文件看起来会像下面这样

文件名：index.html

<!DOCTYPE html>
<html amp>
<head>
   <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>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
   <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
   <title>How to auto suggest rich contents while searching in Google AMP?</title>
</head>
<body>
   <form>
      <label>
         <span>Enter content to get auto-suggest results</span>
         <amp-autocomplete
            filter="token-prefix"
            filter-value="name"
            min-characters="0">
            <input type="search" name="name" />
            <script type="application/json">
               {
                  "items": [
                     {
                        "name": "Luffy",
                        "country": "India"
                     },{
                        "name": "Nami",
                        "country": "USA"
                     },{
                        "name": "Zoro",
                        "country": "Canada"
                     }
                  ]
               }
            </script>
            <template type="amp-mustache" id="amp-template-custom">
            <div data-value="{{name}}, {{country}}">
               {{name}}, {{country}}
            </div>
            </template>
         </amp-autocomplete>
      </label>
   </form>
</body>
</html>