為了在輸入字段鍵入時向用戶實現富內容的自動建議，我們將使用來自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中搜索時自動提供豐富的內容建議？的詳細內容，更多請關注www.92cms.cn其它相關文章！
