Using jQuery Email Autocomplete in HTML Form

To create HTML form more user friendly and mobile user friendly, we suggest use jQuery Email Autocomplete feature. Using this email input field suggest email domain automatically from list of predefined domain names.

For example when user enter first letter of domain “@f” for “@facebook”, than automatically @facebook domain will display in suggestion. Pressing tab-key or Click on it email domain selected. You can define number of domains in the script code.

jquery email autocomplete

JQuery Email Autocomplete on your Web Forms

Lets explain you how you can implement jQuery Email Autocomplete in Html.

1) First write code for html to input an email. Add latest jquery.min.js script link it this page. Here is the code example.

2) Now write jQuery email autocomplete script code to initialize the plugin and set the domain value. Save this file with the name of “jquery.email-autocomplete.js”. Must add this file in HTML form code.

This plugin already have some predefined domain name. Here is the name:

yahoo.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, outlook.com, icloud.com

You can add your domain in JavaScript page code.

You May Also Like:

Simple jQuery Barcode Generator Example
Credit Card Number Validation Using jQuery
jQuery Interactive Parallax Effect for Background Layers

You can change the display format of autocomplete email text by adding some CSS attribute like that. ‘eac-sugg’ is predefined css attribute to show suggested text.

By using this way you can easily implement jQuery email autocomplete feature on your website form. This will make your form more impressive and user friendly. If you find this post useful, Please share with others. Thanks

View live demo and Free source code also available to Download.

Download   |   DEMO

Leave a Comment