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