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

Input Example:
(e.g “@y” for “@yahoo.com” or “@h” for “@hotmail.com” etc). Press tab to complete your email address. (or tap on the suggestion for mobile users.)
See: How to Integrate live search in PHP and MySQL with jQuery
Usage
1. Include jQuery and auto complete plugin js
1
2
|
<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script>
<script src=“js/jquery.email-autocomplete.js”></script>
|
2. Create email input
1
|
<input type=“email” class=“emailaddress” id=“emailaddress” placeholder=“Enter email”>
|
3. Plugin Initialize
1
2
3
|
$( document ).ready(function() {
$(“.emailaddress”).emailautocomplete();
});
|
Above initialization use default options you can add more domains by adding below line in function options.
1
|
domains: [“phpgang.com”] // add your own domains
|
After adding your own domains plugin initialize code look like below sample.
1
2
3
4
5
|
$( document ).ready(function() {
$(“.email”).emailautocomplete({
domains: [“phpgang.com”,“facebook.com”] // add your own domains
});
});
|
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
That’s it for this tutorial, I hope it help you and please share your suggestions and problems in comments.
Tutorial Categories:

Tutorial Categories: