ComboBox

簡介

這個範例示範了經典的下拉式選單組合框，其中包含一個文字欄位，可根據使用者的輸入篩選下拉式選單元素。選項透過 amp-autocomplete 呈現。

設定

`amp-autocomplete` 元件用於根據使用者的輸入提供建議。

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

自動完成輸入

首先，我們需要新增一個 `amp-autocomplete` 元素，方法是為其提供一個輸入欄位和一個資料來源。在這裡，我們使用內嵌的 `script` 宣告來定義美國城市列表作為 `items`。對於長建議列表，可以使用 `src` 屬性擷取遠端 JSON 端點。

我們將使用 `filter="token-prefix"` 作為比對使用者輸入的方式，並設定 `min-characters="0"`，以便即使輸入為空時，組合框也會顯示選項。

最後，可以透過一個按鈕觸發組合框，該按鈕會聚焦輸入欄位：<button on="tap:combo-input.focus">。

<form method="post" id="myform" action-xhr="/documentation/examples/api/echo">
  <amp-autocomplete class="combo-box" filter="token-prefix" min-characters="0">
    <input id="combo-input" name="name" type="text" on="change:myform.submit">
    <button hidden id="close" on="tap:open.show, close.hide">
      <i class="arrow"></i>
    </button>
    <button id="open" on="tap:combo-input.focus, open.hide, close.show">
      <i class="arrow"></i>
    </button>
    <script type="application/json">
      { 
        "items" : [
          "Albany, New York",
          "Annapolis, Maryland",
          "Atlanta, Georgia",
          "Augusta, Maine",
          "Austin, Texas",
          "Baton Rouge, Louisiana",
          "Bismarck, North Dakota",
          "Boise, Idaho",
          "Boston, Massachusetts",
          "Carson City, Nevada",
          "Charleston, West Virginia",
          "Cheyenne, Wyoming",
          "Columbia, South Carolina",
          "Columbus, Ohio",
          "Concord, New Hampshire",
          "Denver, Colorado",
          "Des Moines, Iowa",
          "Dover, Delaware",
          "Frankfort, Kentucky",
          "Harrisburg, Pennsylvania",
          "Hartford, Connecticut",
          "Helena, Montana",
          "Honolulu, Hawaii",
          "Indianapolis, Indiana",
          "Jackson, Mississippi",
          "Jefferson City, Missouri",
          "Juneau, Alaska",
          "Lansing, Michigan",
          "Lincoln, Nebraska",
          "Little Rock, Arkansas",
          "Madison, Wisconsin",
          "Montgomery, Alabama",
          "Montpelier, Vermont",
          "Nashville, Tennessee",
          "Oklahoma City, Oklahoma",
          "Olympia, Washington",
          "Phoenix, Arizona",
          "Pierre, South Dakota",
          "Providence, Rhode Island",
          "Raleigh, North Carolina",
          "Richmond, Virginia",
          "Sacramento, California",
          "Saint Paul, Minnesota",
          "Salem, Oregon",
          "Salt Lake City, Utah",
          "Santa Fe, New Mexico",
          "Springfield, Illinois",
          "Tallahassee, Florida",
          "Topeka, Kansas",
          "Trenton, New Jersey"
    ]}
    </script>
  </amp-autocomplete>
</form>

需要更多說明嗎？

如果此頁面上的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的具體使用案例。

前往 Stack Overflow

功能未說明？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開源社群的持續參與者，但我們也歡迎針對您特別熱衷的問題做出一次性貢獻。

在 GitHub 上編輯範例