UI Components

autocomplete( options )

Easily create an amp-autocomplete with a simple interface that is based on jQuery autocomplete.

  • options

    • Type: Object

    • A map of additional options to pass to the method.

    • Source

      • Type: Array or String

        • Array: An array of objects with label and value properties: [ { label: "Choice1", value: "value1" }, ... ]

        • String: The URL of the remote endpoint which returns the JSON that will be filtered and rendered within this 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.

          The Autocomplete plugin does not filter the results, instead, a query string is added with a term field, which the server-side script should use for filtering the results. For example, if the source option is set to "http://example.com" and the user types "foo", a GET request would be made to "http://example.com?term=foo". The data itself can be in the same format as the local data described above.

    • query (optional)

      • Type: String

      • Default: ‘term’

        The query parameter to generate a static remote endpoint that returns the JSON. 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.

    • template (optional)

      • Type: String

      • Default: _‘<div class="ui-menu-item" data-value="{{value}}">{{label}}</div>’_

        A single item template, see amp autocomplete examples for more details.

    • maxItems (optional)

      • Type: String

      • Default: down

        The max specified number of items to suggest at once based on a user input, displays all if unspecified.

    • minLength (optional)

      • Type: String

      • Default: 1

        The min character length of a user input to provide results, default 1.

    • select (optional)

      • Type: Function

      • Default: down

        Triggered when an item is selected from the menu, the value is beings added to the event argument, for example: select: function (e) { //e.value }

Limitations in AMP:

  1. The input element that the autocomplete is binded to, must be inside a form element.

Example

$('#search-inp').autocomplete({
source: ‘https://example.com/json-api’,
select: function(e) {
$('.search-form').submit();
}
});
$('#search-inp').autocomplete({
source: ‘https://example.com/json-api’,
select: function(e) {
$(window).open(e.value);
}
});
$('#search-inp').autocomplete({
source: [{ value: ‘dog’, ‘label’: ‘Dog’ }, { value: ‘cat’, ‘label’: ‘Cat’ }],
select: function(e) {
$('.search-form').submit();
}
});

slider()

Easily convert an existing javascript slider to amp-carousel slider.

  • options

    • Type: Object

    • A map of additional options to pass to the method.

    • items

      • Type: NodeList

        Node List array (document.querySelectorAll) of the slices elements of the existing carousel in the page.

Example

Existing HTML:

<div class="slick-slider">
<div class="slick-track" style="width: 2415px; transform: translate3d(-345px, 0px, 0px);">
<div class="slick-slide">
<img src="..." />
</div>
<div class="slick-slide">
<img src="..." />
</div>
<div class="slick-slide">
<img src="..." />
</div>
</div>
</div>

Convert the above slider to amp-carousel:

$('.slick-slider').slider({
slides: '.slick-slide'
});
Edit this page