amp-autocomplete-email

簡介

啟用自動完成功能的輸入欄位會在使用者於輸入欄位中輸入內容時，建議與使用者輸入內容對應的完整結果。此功能可協助使用者更快速地完成工作。

資料可以從 JSON 端點擷取。

AMP 執行階段。

<script async src="https://cdn.ampproject.org/v0.js"></script>

AMP 電子郵件樣板。

<style amp4email-boilerplate>
  body {
    visibility: hidden;
  }
</style>

設定

匯入 amp-autocomplete 元件。

<script
  async
  custom-element="amp-autocomplete"
  src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"
></script>

匯入 amp-mustache 元件，以進行內容範本化及回應的轉譯。

<script
  async
  custom-template="amp-mustache"
  src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"
></script>

<style amp-custom>
  .custom {
    padding-top: 4px;
    font: 10pt 'Courier New', Courier, monospace;
  }
  .profile-pic {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    margin-left: -5px;
    float: left;
  }
</style>
</head>
<body>
<h2>Basic usage</h2>

基本用法

amp-autocomplete 必須一律具備以 input 或 textarea 標記指定的輸入欄位和資料來源。當使用者在此輸入欄位中輸入內容時，相關建議就會自動顯示在輸入欄位下方。

資料來源必須是包含陣列屬性 items 的 JSON 物件，而且可以透過 src 屬性以遠端資料的形式提供。

由於伺服器端篩選在電子郵件格式中是強制性的，因此明智之舉是在配對 src 和 query 屬性時，將使用者輸入內容傳遞至靜態產生的端點。例如，如果 src="https://example.com 和 query="q"，則輸入 abc 的使用者會從 https://example.com?q=abc 取得擷取的 JSON 結果。

建議豐富內容

<amp-autocomplete
  min-characters="1"
  src="https://amp.dev.org.tw/documentation/examples/api/autosuggest/search_list"
  query="q"
>
  <input type="search" name="queryInput" />
  <template type="amp-mustache">
    <div data-value="{{.}}">
      {{.}}
    </div>
  </template>
</amp-autocomplete>

<h2>Suggesting rich content</h2>

建議豐富內容

更複雜的資料可以使用「items」中的 JsonObject 陣列傳遞至自動完成功能。

{ "items" : [
    {
        "value" : "Albany",
        "state" : "New York",
        "areaCode" : 518,
        "population" : 98251
    }, {
        "value" : "Annapolis",
        "state" : "Maryland",
        "areaCode" : 410,
        "population" : 39321
    }, {
        "value" : "Trenton",
        "state" : "New Jersey",
        "areaCode" : 609,
        "population" : 84964
    }
] }

這些資料在 amp-autocomplete 中的對應顯示方式可以透過範本指定。

<template type="amp-mustache" id="amp-template-custom">
  <div class="city-item" data-value="{{value}}, {{state}}">
    <div>{{value}}, {{state}}</div>
    <div class="custom-population">Population: {{population}}</div>
  </div>
</template>

內嵌自動完成

<amp-autocomplete
  min-characters="0"
  src="https://amp.dev.org.tw/documentation/examples/api/autosuggest/cities"
  query="q"
>
  <input type="search" name="city" />
  <template type="amp-mustache" id="amp-template-custom">
    <div class="city-item" data-value="{{value}}, {{state}}">
      <div>{{value}}, {{state}}</div>
      <div class="custom">Population: {{population}}</div>
    </div>
  </template>
</amp-autocomplete>

<h2>Inline autocomplete</h2>

內嵌顯示建議

建議可以在 amp-autocomplete 中的指定字元符記上觸發，以便在單一輸入中使用多個自動建議，方法是使用 inline 屬性。

觸發自動建議的符記必須是為 inline 屬性提供的數值。例如，如果 inline="+"，則當使用者輸入 + 符記時，就會顯示任何相關建議。否則，欄位的行為會與未增強的輸入欄位相同。inline 屬性不支援空字串或 "" 作為 amp-autocomplete 上的合法符記值。

<amp-autocomplete
  inline="+"
  min-characters="1"
  src="https://amp.dev.org.tw/documentation/examples/api/autosuggest/characters"
  query="q"
>
  <textarea
    autoexpand
    rows="2"
    cols="50"
    placeholder="Type your message here"
    name="message"
  ></textarea>
  <template type="amp-mustache">
    <div class="close-friends" data-value="{{ email }}">
      <amp-img
        class="profile-pic"
        height="30"
        width="30"
        layout="responsive"
        alt="Profile picture of AMP logo"
        src="https://amp.dev.org.tw/static/samples/img/favicon.png"
      ></amp-img>
      <div class="info">
        <div>{{ name }}</div>
        <div class="custom">{{ email }}</div>
      </div>
    </div>
  </template>
</amp-autocomplete>

需要進一步說明嗎？

如果本頁說明未涵蓋您的所有問題，歡迎隨時與其他 AMP 使用者聯絡，討論您的確切使用案例。

前往 Stack Overflow

未說明的特色功能？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題提供一次性的貢獻。

在 GitHub 上編輯範例

作者 @caroqliu