如何在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中文網其他相關文章！