Email Autocomplete In Vanilla JavaScript

Category: Form , Javascript | March 4, 2023
Author:GakutoMatsumura
Views Total:168 views
Official Page:Go to website
Last Update:March 4, 2023
License:MIT

Preview:

Email Autocomplete In Vanilla JavaScript

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

You Might Be Interested In:


Leave a Reply