Auto-Complete Email Address Form Using Jquery Plugin

In this tutorial I will show you that how you can create an email autocomplete field in your web forms using jQuery. It will auto complete the domain suffix with provided list of domains. Its a jQuery plugin we used to create this autocomplete form and its very easy to implement. The source code is also available for download.

 

PROJECT SCREENSHOT:

STEP 1:

Include jQuery and auto complete plugin js

[code]
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22http%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fjquery%2F1.10.2%2Fjquery.min.js%22%3E%3B%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />;
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22js%2Fjquery.email-autocomplete.js%22%3E%3B%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />;
[/code]

 

STEP 2:

Create email input

[code]
<input type="email" class="emailaddress" id="emailaddress" placeholder="Enter email">;
[/code]

STEP 3:

Plugin Initialization

[code]
$( document ).ready(function() {
$(".emailaddress").emailautocomplete();
});
[/code]

 

In above initialization use default options, you can add more domains by adding below line in function options.

[code]
domains: ["Meul Tech classes.com"] // add your own domains
[/code]

 

After adding your own domains plugin, initialize the code which looks like below sample.

[code]
$( document ).ready(function() {
$(".email").emailautocomplete({
domains: ["Meul Tech classes.com","facebook.com"] // add your own domains
});
});
[/code]

 

Predefined plugin domains:

  • yahoo.com
  • google.com
  • hotmail.com
  • gmail.com
  • me.com
  • aol.com
  • mac.com
  • live.com
  • googlemail.com
  • msn.com
  • gmx.com
  • mail.com
  • outlook.com
  • icloud.com

 

Finally this tutorial is complete,

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends becaus“You share, I share, let’s make the world aware”.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends becaus“You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .

Bonus: We also give training on following topics:

1. Web Designing Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Python Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.