amp-autocomplete-email

简介

启用自动完成的输入字段会在用户在输入字段中键入时建议与用户输入对应的已完成结果。此功能可以帮助用户更快地完成任务。

可以从 JSON 端点获取数据。

AMP 运行时。

<script async src="https://cdn.ampproject.org/v0.js"></script>

电子邮件的 AMP 样板。

<style amp4email-boilerplate>
  body {
    visibility: hidden;
  }
</style>

设置

导入 amp-autocomplete 组件。

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

导入 amp-mustache 组件，用于内容模板和响应呈现。

<script
  async
  custom-template="amp-mustache"
  src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"
></script>

<style amp-custom>
  .custom {
    padding-top: 4px;
    font: 10pt 'Courier New', Courier, monospace;
  }
  .profile-pic {
    width: 40px;
    height: 40px;
    margin-right: 10px;
    margin-left: -5px;
    float: left;
  }
</style>
</head>
<body>
<h2>Basic usage</h2>

基本用法

amp-autocomplete 必须始终有一个使用 input 或 textarea 标签指定的输入字段和一个数据源。当用户在此输入字段中键入时，相关建议将自动出现在输入字段下方。

数据源必须是一个 JSON 对象，其中包含一个数组属性 items，并且可以通过 src 属性以远程数据的形式提供。

由于在电子邮件格式中强制进行服务器端筛选，因此明智的做法是将 src 和 query 属性配对，以便将用户输入传递到静态生成的端点。例如，如果 src="https://example.com 和 query="q"，那么键入 abc 的用户将从 https://example.com?q=abc 获取 JSON 结果。

建议丰富内容

<amp-autocomplete
  min-characters="1"
  src="https://amp.org.cn/documentation/examples/api/autosuggest/search_list"
  query="q"
>
  <input type="search" name="queryInput" />
  <template type="amp-mustache">
    <div data-value="{{.}}">
      {{.}}
    </div>
  </template>
</amp-autocomplete>

<h2>Suggesting rich content</h2>

建议丰富内容

更复杂的数据可以通过“items”中的 JsonObject 数组传递到自动完成中。

{ "items" : [
    {
        "value" : "Albany",
        "state" : "New York",
        "areaCode" : 518,
        "population" : 98251
    }, {
        "value" : "Annapolis",
        "state" : "Maryland",
        "areaCode" : 410,
        "population" : 39321
    }, {
        "value" : "Trenton",
        "state" : "New Jersey",
        "areaCode" : 609,
        "population" : 84964
    }
] }

可以通过模板指定这些数据在 amp-autocomplete 中的相应显示。

<template type="amp-mustache" id="amp-template-custom">
  <div class="city-item" data-value="{{value}}, {{state}}">
    <div>{{value}}, {{state}}</div>
    <div class="custom-population">Population: {{population}}</div>
  </div>
</template>

内联自动完成

<amp-autocomplete
  min-characters="0"
  src="https://amp.org.cn/documentation/examples/api/autosuggest/cities"
  query="q"
>
  <input type="search" name="city" />
  <template type="amp-mustache" id="amp-template-custom">
    <div class="city-item" data-value="{{value}}, {{state}}">
      <div>{{value}}, {{state}}</div>
      <div class="custom">Population: {{population}}</div>
    </div>
  </template>
</amp-autocomplete>

<h2>Inline autocomplete</h2>

内联显示建议

可以通过使用 inline 属性在 amp-autocomplete 中指定字符令牌来触发建议，以便在单个输入中进行多个自动建议。

用于触发自动建议的令牌必须是为 inline 属性提供的指定值。例如，如果 inline="+"，那么当用户输入 + 令牌时，将显示任何相关建议。否则，该字段的行为将与未增强的输入字段相同。inline 属性不支持空字符串，或者 "" 作为 amp-autocomplete 上的合法令牌值。

<amp-autocomplete
  inline="+"
  min-characters="1"
  src="https://amp.org.cn/documentation/examples/api/autosuggest/characters"
  query="q"
>
  <textarea
    autoexpand
    rows="2"
    cols="50"
    placeholder="Type your message here"
    name="message"
  ></textarea>
  <template type="amp-mustache">
    <div class="close-friends" data-value="{{ email }}">
      <amp-img
        class="profile-pic"
        height="30"
        width="30"
        layout="responsive"
        alt="Profile picture of AMP logo"
        src="https://amp.org.cn/static/samples/img/favicon.png"
      ></amp-img>
      <div class="info">
        <div>{{ name }}</div>
        <div class="custom">{{ email }}</div>
      </div>
    </div>
  </template>
</amp-autocomplete>

需要进一步解释吗？

如果此页面上的解释没有涵盖您的所有问题，请随时与其他 AMP 用户联系，讨论您的确切用例。

转到 Stack Overflow

未解释的功能？

AMP 项目强烈鼓励您的参与和贡献！我们希望您成为我们开源社区的持续参与者，但我们也欢迎您为特别热衷的问题做出一次性贡献。

在 GitHub 上编辑示例

作者： @caroqliu