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="<script>" title="<script>" />;
<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="<script>" title="<script>" />;
[/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 because “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 because “You share, I share, let’s make the world aware”.
You may want to take a look at the following related posts:
- Jquery Scroll Effect Tutorial For One Page Website.
- Multiple Select DropDown List Tutorial in PHP and Jquery
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.
4. UI / UX Training.
5. IOS Training Institute in Mumbai.