# How to Use amp-autocomplete in Your AMP Emails

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WebPage",
  "headline": "Amp-autocomplete - Features, Applications, and Examples",
  "description": "Features and applications of amp-autocomplete, one of the AMP email components, give users pre-defined suggestions based on their input text in the email",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1652870731/strapi/Featured_image_Amp_autocomplete_19aac5dea5.png",
  "datePublished": "2022-02-10T18:20:00.045Z",
  "dateModified": "2025-01-08T18:17:34.439Z",
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "url": "https://www.mailmodo.com/",
    "sameAs": [
      "https://www.linkedin.com/company/mailmodo/",
      "https://www.facebook.com/mailmodo/",
      "https://www.instagram.com/mailmodohq/",
      "https://www.youtube.com/@mailmodo"
    ],
    "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
    "description": "Mailmodo is a complete email marketing platform that helps email marketers to create and send interactive emails to drive growth and engagement.",
    "address": {
      "@type": "PostalAddress",
      "addressLocality": "Lewes",
      "addressRegion": "DE",
      "postalCode": "19958",
      "streetAddress": "Mailmodo Technologies Inc. 16192, Coastal Highway",
      "addressCountry": {
        "@type": "Country",
        "name": "US"
      }
    },
    "contactPoint": {
      "@type": "ContactPoint",
      "email": "enquiries@mailmodo.com",
      "contactType": "customer service"
    }
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Amp-autocomplete - Features, Applications, and Examples",
  "description": "Features and applications of amp-autocomplete, one of the AMP email components, give users pre-defined suggestions based on their input text in the email",
  "image": "https://res.cloudinary.com/mailmodo/image/upload/v1652870731/strapi/Featured_image_Amp_autocomplete_19aac5dea5.png",
  "datePublished": "2022-02-10T18:20:00.045Z",
  "dateModified": "2025-01-08T18:17:34.439Z",
  "author": {
    "@type": "Person",
    "name": "Suryanarayan Pal",
    "url": "https://www.mailmodo.com/guides/author/suryanarayan-pal/"
  },
  "publisher": {
    "@type": "Organization",
    "name": "Mailmodo",
    "logo": {
      "@type": "ImageObject",
      "url": "https://www.mailmodo.com/static/images/logo/logo-full.svg"
    }
  },
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.mailmodo.com/guides/amp-autocomplete/"
  }
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Organization",
  "@id": "#creator",
  "description": "Email marketing software to create and send interactive emails to maximize conversions and reinvent your user journey",
  "email": "support@mailmodo.com",
  "image": "https://www.mailmodo.com/static/images/og-image.png",
  "knowsAbout": "Email marketing",
  "legalName": "Mailmodo Technologies Inc.",
  "location": "United States",
  "logo": "https://www.mailmodo.com/static/images/logo/logo-full.svg",
  "name": "Mailmodo",
  "sameAs": [
    "https://twitter.com/mailmodo",
    "https://www.facebook.com/company/mailmodo/",
    "https://www.linkedin.com/company/mailmodo/"
  ],
  "url": "https://www.mailmodo.com/"
}
</script>

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://www.mailmodo.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "Guides",
      "item": "https://www.mailmodo.com/guides/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "amp autocomplete",
      "item": "https://www.mailmodo.com/guides/amp-autocomplete/"
    }
  ]
}
</script>

## Table of contents

- What is amp-autocomplete?
- Applications of amp-autocomplete
- Features of amp-autocomplete
- Wrapping up

If you shop on eCommerce sites like Amazon and Flipkart, you would have noticed the autocomplete functionality in their search bars.

As you start typing your query, it automatically suggests relevant search results to choose from. This feature is common and offered by most eCommerce sites.

But what about emails? Is it possible to add this feature to your [AMP emails](https://www.mailmodo.com/guides/amp-for-email/)?  Yes, absolutely. You can do so with the help of **amp-autocomplete.**

This guide will teach you what **amp-autocomplete** is and how to use it to add eCommerce-like autocomplete functionality to your AMP emails.



-   What is amp-autocomplete?
    
-   Applications of amp-autocomplete
    
-   Features of amp-autocomplete
    
-   Wrapping up

## What is amp-autocomplete?

The **amp-autocomplete** is an [AMP email component](https://www.mailmodo.com/guides/amp-email-component/) that shows completed results from a set of predefined strings based on the user input. You can create the predefined set of strings using a JSON file.

For example, if the user types “Mai” in the input, you can set it up to show similar results like “[Mailmodo](https://www.mailmodo.com/),” “Mailspring,” “Mailbird,” etc. This makes it easier for your users to complete the task quickly.

![Amp-autocomplete in action in inbox](https://res.cloudinary.com/mailmodo/image/upload/f_auto,q_100/v1644917777/strapi/Amp_autocomplete_in_action_8d4d115d30.gif)

## Applications of amp-autocomplete

Here are some scenarios where amp-autocomplete can be used:

### 1.  Suggest pre-defined locations
    

The location data is important to many businesses if they want to operate successfully. And that can be collected easily with the help of amp-autocomplete. 

For example, if you are a food delivery operator and want to know your customer's delivery location, you can add a field for your users to enter their location. To simplify it further, you can add a predefined list of locations that will show as users start typing the initial words in the location field.

### 2. Add built-in search bars
    

Emails can bring a good amount of traffic to your blog. To do that, you can send an [AMP email](https://www.mailmodo.com/guides/amp-email-benefits/) with a built-in search bar. Your users can type a keyword they would like to know more about, and you can fetch your blog post title and links from a JSON file and suggest them to your users while they are typing. This will make it easier for your users to find your blog content without leaving their inbox.

### 3. Show available products
    

You need to make things easy for your users if you want them to buy from you. One way to do this is by adding autocomplete to your text fields. So when users start typing a product name, the autocompleting text field will show the list of all the available products containing the same letters. Users can scan and choose your products quickly, making the purchasing cycle smooth.

## Features of amp-autocomplete

Amp-autocomplete has many features which can be accessed by using its attributes. Here’s a few of those:

### ✅ Define minimum characters to show results

If you go to Google and start typing in its search bar, you’ll notice that it shows suggestions as soon as you type your first character. Similarly, with the help of min-characters, you can set up amp-autocomplete to show suggestions at a minimum character length. This length is set to 1 by default, but you can set it to any value of your choice.

### ✅ Control the number of suggestions displayed

Do you want not to overwhelm your users with all the available suggestions? If so, you can use the **max-items attribute** to control how many suggestions are shown at a time. For example, if you set it as two, only two suggestions are shown when users input their data. On the other hand, leaving this at default mode will show all the available options.

**Related guides:** [Use Cases of AMP Emails](https://www.mailmodo.com/guides/amp-email-use-cases/)

### ✅ Take multiple actions with a single click

You can use the **submit-on-enter** if you want your users to take multiple actions simultaneously. The enter key is used to select a suggestion, but when you use this attribute, it selects the suggestions and continues its default action. The form will be submitted if that is the default action.

  

These are some of the highlighting features of amp-autocomplete. But there are other attributes of amp-autocomplete that open up an array of features. And those attributes are: **src, query, max-items, suggest-first, Items, Inline, prefetch**.

  

Visit [amp.dev](https://amp.dev/documentation/components/amp-autocomplete/?format=email) for more information.

## Wrapping up

The autocomplete functionality makes it easy to find relevant data and use them. Now with the help of amp-autocomplete, you can create such experiences right inside your AMP emails.

Apart from autocompleting, you can do so much more with AMP email components, and we have covered other components in detail. So do check them out to take full advantage of the AMP framework.

---

**Author: Suryanarayan Pal**

Suryanarayan has 7 years of experience in email marketing for B2B, SaaS, and e-commerce, specializing in email deliverability and project management.

