Email Address Input Made Easy! How to Set Up Domain Autocomplete with email-autocomplete.js

When entering an email address, the “jquery.email-autocomplete.js” plugin is a useful JavaScript tool that automatically completes the domain part (after the @ mark).
With this plugin, users can type just a few characters of a common domain and have the rest auto-completed, reducing the effort needed to input the full address.

• Typing “g” will autocomplete to “gmail.com”.
• Typing “h” will autocomplete to “hotmail.com”.
• Typing “y” will autocomplete to “yahoo.co.jp”.

CSS Code

First, set the style for the email address input form. Refer to the CSS below and customize it as needed.

<style type="text/css">
<!--
body{
  text-align: center;
  font-size: 16px;
}
h1{
  text-align: center;
  padding: 10px 0 0 0;
  font-size: 18px;
  font-weight: bold;
}
p{
  padding: 15px 0 25px 0;
}
form{
  width: 400px;
  margin: 0 auto;
}
-->
</style>

JavaScript Code

Next, set up the JavaScript needed to use the jquery.email-autocomplete.js plugin.
Include the jquery.min.js and jquery.email-autocomplete.js files.
Use $(“textbox”).emailautocomplete({ add desired domains }) to enable domain autocomplete after the @ mark.
Refer to the code below. You can add as many domains as you’d like to autocomplete.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="jquery.email-autocomplete.js"></script>
<script>
$(document).ready(function(){
  $(".email").emailautocomplete({
    domains: ["dad-union.com", "yahoo.co.jp"]
  });
});
</script>

HTML Code

Set up the email address input form as shown below.
To enable domain autocomplete, specify class=”form-control email” for the input field.

<h1>Automatically complete domain names (after the @ mark) while typing in the email address field</h1>

<p>
Please enter an email address in the field below.<br>
After the @ mark, typing:
"g" will autocomplete to "gmail.com"<br>
"y" will autocomplete to "yahoo.co.jp"<br>
"d" will autocomplete to "dad-union.com"<br>
</p>

<form role="form">
  <div class="form-group">
    <label for="email">Email Address</label>
    <input type="email" class="form-control email" id="email" placeholder="Enter your email address">
  </div>
</form>

Demo Page: Automatically Complete Domain Names While Typing in the Email Address Field

If you’d like to see a demo page using this plugin, check the link below.

Demo Page for Email Domain Autocomplete

Source: email-autocomplete

You can find the source code of this plugin on the GitHub page below.

email-autocomplete

Conclusion

An email address autocomplete feature is a great tool to reduce user effort and improve form usability.
With jquery.email-autocomplete.js, implementing this feature is quick and easy. Give it a try!

　
*Please use at your own risk when reusing the code.
Do not reuse the Google Analytics tag within the head tag of the demo page.