Submit your widget

A jQuery plugin that suggests and autocompletes the email address

Created 6 years ago   Views 9577   downloads 1993    Author yzlow
A jQuery plugin that suggests and autocompletes the email address
View DemoDownload
78
Share |

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

License

Copyright (c) 2014

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.