数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何在 Google AMP 搜索中自动建议丰富的內容？
为了在用户输入字段键入过程中实现对丰富内容的自动建议，我们将使用 Google AMP 框架中的“amp-autocomplete”脚本。自动完成输入字段意味着在用户开始键入时向用户建议相关内容。
让我们用下面的示例讨论这种方法：
方法
我们将使用“amp-autocomplete”脚本在我们的网页上添加丰富内容的自动建议。我们还将使用 Google AMP 框架中的“amp-form”脚本，以便使用其 amp-form 组件并在 UI 中显示它，并使用“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>
结论
在本文中，我们学习了什么是 Google AMP，并使用它通过 Google AMP 框架中的“amp-autocomplete”、“amp-form”、“amp-mustache”和“amp-project”等不同脚本在 Google AMP 搜索中自动建议丰富的內容。
82 次浏览
