组合框

简介

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