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 上编辑示例