為了在輸入字段鍵入時(shí)向用戶(hù)實(shí)現(xiàn)富內(nèi)容的自動(dòng)建議，我們將使用來(lái)自Google AMP框架的“amp-autocomplete”腳本。自動(dòng)完成輸入字段意味著在用戶(hù)開(kāi)始鍵入時(shí)向用戶(hù)建議相關(guān)內(nèi)容。
讓我們通過(guò)一個(gè)例子來(lái)討論這種方法，如下所示 ?
方法
我們將使用“amp-autocomplete”腳本在我們的網(wǎng)頁(yè)上添加富內(nèi)容的自動(dòng)建議。我們還將使用Google AMP框架的“amp-form”腳本，以便使用其amp-form組件并在UI中顯示它，并使用“amp-mustache”為我們提供在網(wǎng)頁(yè)中使用的模板。
Scripts Used Here
的中文翻譯為：
在這里使用的腳本
加載amp-autocomplete的腳本 ?
<script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"> </script>
登錄后復(fù)制
這個(gè)腳本用于加載amp-autocomplete功能，它可以幫助我們?cè)诰W(wǎng)頁(yè)上添加豐富內(nèi)容的自動(dòng)建議。
加載amp-form的腳本 ?
<script async custom-element="amp-form"src="https://cdn.ampproject.org/v0/amp-form-0.1.js"> </script>
登錄后復(fù)制
此腳本用于加載Google AMP框架的amp-form組件，我們可以在應(yīng)用程序中使用該組件
加載amp-project的腳本 ?
<script async src="https://cdn.ampproject.org/v0.js"></script>
登錄后復(fù)制
這個(gè)腳本用于加載amp-project，使我們能夠使用Google AMP框架的不同功能。
加載amp-mustache的腳本 ?
<script async custom-template="amp-mustachesrc="https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
登錄后復(fù)制
這個(gè)腳本用于加載amp-mustache模板，它允許我們?cè)贖TML文件中使用模板。
我們將以下面的JSON對(duì)象作為一個(gè)復(fù)雜的數(shù)據(jù)示例，并使用這個(gè)數(shù)據(jù)將其傳遞給amp-autocomplete，以提供建議的結(jié)果。
JSON對(duì)象使用 –
{
"items": [
{
"name": "Luffy",
"country": "India"
},{
"name": "Nami",
"country": "USA"
},{
"name": "Zoro",
"country": "Canada"
}
]
}
登錄后復(fù)制
然后我們將使用amp-form組件，并將JSON對(duì)象傳遞給它，以便為我們提供自動(dòng)建議的結(jié)果。我們將使用以下形式的AMP mustache模板格式 –
<template type="amp-mustache" id="amp-template-custom">
<div data-value="{{name}}, {{country}}">
{{name}}, {{country}}
</div>
</template>
登錄后復(fù)制
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>
登錄后復(fù)制
結(jié)論
在這篇文章中，我們了解了什么是Google AMP，并且我們使用它來(lái)在Google AMP中使用不同的腳本（如“amp-autocomplete”，“amp-form”，“amp-mustache”和“amp-project”）來(lái)自動(dòng)建議豐富的內(nèi)容。
以上就是如何在Google AMP中搜索時(shí)自動(dòng)提供豐富的內(nèi)容建議？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
