Easy Email Autocomplete Plugin With Vanilla JavaScript

Preview:

Description:

Email addresses are one of the most important online assets. They are the entry points to your audience’s inbox which should be treated as such. This plugin simply adds an autocomplete function to the email field, thus making it easier and faster to complete.

How it works:

When the user enters @ in the input box, this plugin will automatically complete the domain of the email according to the user’s input. For example, when the user enters g after @, the plugin will automatically complete the email domain as gmail.com.

How to use it:

1. Download and load the email-autocomplete.js library.

<script src="./dist/email-autocomplete-min.js"></script>

2. Attach the plugin to the target email input and define an array of domains as follows:

<input type="email" class="email-input">

new EmailAutocomplete(document.querySelector('.email-input') , {
    autoCompleteList: ["outlook.com","gmail.com","yahoo.com"],
})

3. Customize the styles of the suggestions.

new EmailAutocomplete(document.querySelector('.email-input') , {
    autoCompleteList: ["outlook.com","gmail.com","yahoo.com"],
    suggestionSpanColor: 'white',
    suggestionSpanBackgroundColor: 'black',
})