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 上編輯範例