如何在Google AMP中搜索时自动提供丰富的内容建议？

为了在输入字段键入时向用户实现富内容的自动建议，我们将使用来自Google AMP框架的“amp-autocomplete”脚本。自动完成输入字段意味着在用户开始键入时向用户建议相关内容。

让我们通过一个例子来讨论这种方法，如下所示 −

方法

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

Scripts Used Here

的中文翻译为：

在这里使用的脚本

• 加载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>

Example

我们的index.html文件将如下所示−

文件名：index.html

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


   

      
         Enter content to get auto-suggest results
         
            
            
            
         
      
   

结论

在这篇文章中，我们了解了什么是Google AMP，并且我们使用它来在Google AMP中使用不同的脚本（如“amp-autocomplete”，“amp-form”，“amp-mustache”和“amp-project”）来自动建议丰富的内容。

以上是如何在Google AMP中搜索时自动提供丰富的内容建议？的详细内容。更多信息请关注PHP中文网其他相关文章！