为了在输入字段键入时向用户实现富内容的自动建议，我们将使用来自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
<!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中搜索时自动提供丰富的内容建议？的详细内容，更多请关注双恒网络其它相关文章！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何在Google AMP中搜索时自动提供丰富的内容建议？
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
