html

Add autocomplete on input in AMP webpages

You can easily add autocomplete on inputs using the amp-autocomplete component if you are creating your web pages using AMP.

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

<!-- Add HTML markup where you want to add autocomplete -->
<amp-autocomplete filter="substring" id="my_autocomplete">
    <input placeholder="Enter fruit name" />
    <script type="application/json">
        {"items": ["Apple", "Banana", "Orange", "Pineapple", "Avocado", "Blackberries"]}
    </script>
</amp-autocomplete>

We have created a simple autocomplete using the amp-autocomplete component in AMP. Here we are loading data that exist on the same web page. Here items keys having the data which will be used to search and list for input autocomplete.

If you want to load data from a remote source that returns data in the form of an array of objects then you need to add an amp-mustache script on your AMP webpage in the head tag and create your AMP autocomplete after that. To add amp-mustache on your AMP web page add the below script.

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

Now add below HTML with src attribute where you pass the remote API URL that returns data on input key up.

<amp-autocomplete filter="substring" id="my_autocomplete" src="./data/countries.json" query="q" filter-value="name">
    <input placeholder="Enter country name" />
    
    <template type="amp-mustache" >
    <div data-value="{{name}}" data-json="{{objToJson}}">
        {{name}} {{code}}
    </div>
    </template>
</amp-autocomplete>

The countries JSON structure that our API is returning is as below

{
    "items": [
        {"name": "Australia", "code": "AU"},
        {"name": "Austria", "code": "AT"},
        {"name": "Azerbaijan", "code": "AZ"},
        {"name": "Bahamas", "code": "BS"},
        {"name": "Bahrain", "code": "BH"},
        {"name": "India", "code": "IN"}
    ]
}

The full code that can be used to implement simple AMP autocomplete along with remote data sources can be found below.

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="https://your_website_domain.com/path_url/">
    <meta name="viewport" content="width=device-width">
    <title>My AMP autocompletes</title>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
    <script async custom-element="amp-autocomplete" src="https://cdn.ampproject.org/v0/amp-autocomplete-0.1.js"></script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <?php require_once('./content/gStyle.php') ?>
    <style amp-custom>
        amp-autocomplete input { width: 500px; }
    </style>
</head>
  <body>
    <div class="eg_wrap">
        <h1>Examples of Autocomplete on input in AMP</h1>

        <div class="eg_panel">
            <h2>Create AMP aurocomplete using local data</h2>

            <amp-autocomplete filter="substring" id="my_autocomplete">
                <input placeholder="Enter fruit name" />
                <script type="application/json">
                    {"items": ["Apple", "Banana", "Orange", "Pineapple", "Avocado", "Blackberries"]}
                </script>
            </amp-autocomplete>
        </div><!--/.eg_panel-->

        <div class="eg_panel">
            <h2>Load data from remote</h2>
                
            <amp-autocomplete filter="substring" id="my_autocomplete" src="./data/countries.json" query="q" filter-value="name">
                <input placeholder="Enter country name" />
                
                <template type="amp-mustache" >
                <div data-value="{{name}}" data-json="{{objToJson}}">
                    {{name}} {{code}}
                </div>
                </template>
            </amp-autocomplete>
        </div><!--/.eg_panel-->
    </div><!--/.eg_wrap-->
  </body>
</html>

Was this helpful?