Table of contents

amp-autocomplete

Suggests completed results corresponding to the user input as they type into the input field.

Required Scripts

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

Supported Layouts

container

Examples

amp-autocomplete ComboBox

Behavior

The amp-autocomplete extension should be used for suggesting completed items based on user input to help users carry out their task more quickly.

This can be used to power search experiences, in cases where the user may not know the full range of potential inputs, or in forms to help ensure inputs where there may be multiple ways to express the same intent (using a state abbreviation instead of its full name, for example) yield more predictable results.

Example:

<amp-autocomplete filter="substring" id="myAutocomplete">
  <input />
  <script type="application/json">
    {"items": ["a", "b", "c"]}
  </script>
</amp-autocomplete>

Attributes

filter (required)	The filtering mechanism applied to source data to produce filtered results for user input. In all cases the filtered results will be displayed in array order of data retrieved. If filtering is being done (`filter != none`), it is done client side. The following are supported values: substring: if the user input is a substring of an item, then the item is suggested prefix: if the user input is a prefix of an item, then the item gets suggested token-prefix: if the user input is a prefix of any word in a multi-worded item, then the item gets suggested; example “je” is a token-prefix in “blue jeans” fuzzy: typos in the input field can result in partial match items appearing in the filtered results—need further research none: no client-side filter; renders retrieved data based on bound `[src]` attribute; truncates to `max-entries` attribute if provided custom: a conditional statement involving an item and a user input to be applied to each item such that evaluating to true implies the item gets suggested; using this filter requires including `amp-bind` if `filter==custom`, an additional attribute `filter-expr` is required to specify a boolean expression by which to perform the custom filter.
src (optional)	The URL of the remote endpoint that returns the JSON that will be filtered and rendered within this `amp-autocomplete`. This must be a CORS HTTP service and the URL's protocol must be HTTPS. The endpoint must implement the requirements specified in the CORS Requests in AMP spec. If fetching the data at the src URL fails, the `amp-autocomplete` triggers a fallback. The src attribute may be omitted if the `[src]` attribute exists.
query (optional)	The query parameter to generate a static remote endpoint that returns the JSON that will be filtered and rendered within this `amp-autocomplete`. This requires the presence of the `src` attribute. For example, if `src="http://www.example.com"` and `query="q"`, then when a user types in `abc`, the component will retrieve data from `http://www.example.com?q=abc`.
filter-expr (optional)	Required if `filter==custom`
filter-value (optional)	If data is an array of JsonObjects, the filter-value is the property name that will be accessed for client side filtering. This attribute is unnecessary if filter is none. Defaults to "value".
min-characters (optional)	The min character length of a user input to provide results, default 1
max-entries (optional)	The max specified number of items to suggest at once based on a user input, displays all if unspecified
suggest-first (optional)	Suggest the first entry in the list of results by marking it active; only possible if `filter==prefix` (does nothing otherwise)
submit-on-enter (optional)	The enter key is primarily used for selecting suggestions in autocomplete, so it shouldn’t also submit the form unless the developer explicitly sets it to do so (for search fields/one field forms, et cetera). The user flow is as follows: If `submit-on-enter` is `true`, pressing `Enter` will select any currently active item and engage in default behavior, including submitting the form if applicable. If `submit-on-enter` is `false`, pressing `Enter` while suggestions are displaying will select any currently active item only and prevent any other default behavior. If suggestions are not displaying, autocomplete allows default behavior. Defaults to false.
highlight-user-entry (optional)	If present, exposes the `autocomplete-partial` class on the substring within the suggested item that resulted in its match with the user input. This can be used to stylize the corresponding match to stand out to the user. Defaults to false.
items (optional)	Specifies the key to the data array within the JSON response. Nested keys can be expressed with a dot-notated value such as `field1.field2.` The default value is `"items"`. The following are examples with and without usage: In the first example, the JSON payload is queued by the "items" key, and thus no component attribute is needed because the default value corresponds. In the second example, the JSON payload is queued by the "fruit" key, so the `items` attribute is given the value `"fruit"` so as to accurately etrieve the intended datasource. In both examples, the end user interaction is the same.
inline (optional)	Whether the `amp-autocomplete` should autosuggest on the full user input or only a triggered substring of the user input. By default when the attribute is absent, suggestions will be based on the full user input. The attribute cannot have an empty value but must take a single character token, i.e. `@` which activates the autocomplete behavior. For example, if `inline="@"` then user input of `hello` will not retrieve suggestions but a user input of `hello @abc` might trigger options filtered on the substring `abc`. Currently triggered substrings are delimited on whitespace characters, however this is subject to change in the future.

Events

Events may trigger actions on other AMP components using the on attribute. e.g. on="select: my-tab.show"

{{#initial}}Important Components{{/initial}}{{^initial}}컴포넌트{{/initial}}

{{#initial}}<{{title}}>{{/initial}}{{^initial}}{{title}}{{/initial}}

{{#initial}}Popular Articles{{/initial}}{{^initial}}Results{{/initial}}

{{title}}

;(

Something went wrong…

¯\_(ツ)_/¯

No results found.