To create HTML form more user-friendly and mobile user friendly, we suggest using jQuery Autocomplete for the email feature. Using this email input field suggest email domain automatically from list of predefined domain names.
For example, when the user enters the first letter of domain “@f” for “@facebook”, then automatically @facebook domain will display in suggestion. Pressing the tab-key or Click on its email domain selected. You can define the number of domains in the script code.
JQuery Autocomplete Email on your Web Forms
Let’s explain to you how you can implement jQuery Autocomplete for email in Html.
1) First, write code for HTML to input an email. Add the latest jquery.min.js script link it this page. Here is the code example.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="jquery.email-autocomplete.js"></script> </head> <body> <div align="center"> <h2>jQuery Email Autocomplete</h2> <input type="email" id="email" placeholder="Enter email"> </div> </body> </html> |
2) Now write jQuery autocomplete email 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.
|
1 2 3 4 5 6 7 8 |
<script> $(document).ready(function() { $("#email").emailautocomplete({ domains: ["codefixup.com"] //list your own domains }); }); </script> |
This plugin already has some predefined domain names. 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 the 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 attributes like that. ‘eac-sugg’ is a predefined css attribute to show suggested text.
|
1 2 3 4 5 |
<style type="text/css"> .eac-sugg { color: #000000; } </style> |
By using this way you can easily implement jQuery autocomplete email feature on your website form. This will make your form more impressive and user friendly. If you find this post useful, please share it with others. Thanks
View live demo and Free source code also available to Download.
