Email Autocomplete In Vanilla JavaScript

Category: Form , Javascript | March 4, 2023
AuthorGakutoMatsumura
Last UpdateMarch 4, 2023
LicenseMIT
Views206 views
Email Autocomplete In Vanilla JavaScript

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);
}

You Might Be Interested In:


Leave a Reply