组合框

简介

此示例演示了一个经典的下拉组合框，其中包含一个文本字段，该字段根据用户的输入筛选下拉元素。这些选项通过 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 上编辑示例