A jQuery plugin that suggests and autocompletes the email address

A jQuery plugin that suggests and autocompletes the domain whenever your users type in an email address field.

What does it do?

When your user types in "user@gm", the plugin will suggest for e.g. "user@gmail.com", based on the first result from a list of predefined email domains.

Press the tab-key, or simply click on the suggestion to automatically fill in the rest of the domain. (or tap on the suggestion for mobile users.)

See a live demo here.

Installation

To use, download the minified library into your javascripts directory. jquery.email-autocomplete.js is also available unminimized.

Usage (jQuery)

Include jQuery and Email Autocomplete into your HTML.

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

You should have a text field.

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

Now, attach the plugin to the text field.

<script>
$("#email").emailautocomplete({
  suggClass: "custom-classname", //default: "eac-sugg". your custom classname (optional)
  domains: ["example.com"] //additional domains (optional)
});
</script>

Styling

Use the following CSS to style the suggestion text color

.eac-sugg{
  color:#ccc;
}

Domains

Email Autocomplete has its own default domains if the domains option isn't provided.

yahoo.com
google.com
hotmail.com
gmail.com
me.com
aol.com
mac.com
live.com
comcast.net
googlemail.com
msn.com
hotmail.co.uk
yahoo.co.uk
facebook.com
verizon.net
sbcglobal.net
att.net
gmx.com
mail.com
outlook.com
icloud.com

Author

Low Yong Zhen, @lowyongzhen.

License

Licensed under the MIT License.

Known Issues:

On android stock browser, if "Settings > Accessibility > Scale text up and down" value is not at 100%, text width is unabled to be retrieved correctly.