Email Autocomplete In Vanilla JavaScript

Preview:

Description:

This is the vanilla JavaScript library of the jQuery email-autocomplete plugin, which automatically suggests and autocompletes domains while typing @ in an email field.

It not only speeds up the process of entering an email address but also reduces the risk of typos and errors that can result in lost messages or missed opportunities.

How to use it:

1. Download and load the ’email-autocomplete-vanilla.min.js’ in the document.

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

2. Initialize the emailautocomplete on the target email input.

<input id="target_input_id" name="email" type="email">

document.addEventListener("DOMContentLoaded", function(e) {
  emailautocomplete("#target_input_id", {
    // options here
  });
});

3. Add more domain suggestions into the list.

document.addEventListener("DOMContentLoaded", function(e) {
  emailautocomplete("#target_input_id", {
    domains: ["gmail.com","icloud.com","outlook.com","yahoo.com","hotmail.com","aol.com","live.com","msn.com","protonmail.com","me.com","mac.com","googlemail.com","facebook.com","gmx.com","zoho.com"]
  });
});

4. Style the domain suggestions.

.eac-sugg {
  background-color: rgba(128,128,128,0.175);
  color: rgba(128,128,128,0.85);
}