Email autocomplete on your forms with jQuery

December 12, 2024 11:00 pm

Email autocomplete on your forms with jQuery

{ Leave a comment}

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.

DOWNLOAD CODE DEMO

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

<br />
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js”></script><br />
<script src=”js/jquery.email-autocomplete.js”></script>

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

<br />
<input type=”email” class=”emailaddress” id=”emailaddress” placeholder=”Enter email”>

1	<input type=“email” class=“emailaddress” id=“emailaddress” placeholder=“Enter email”>

3. Plugin Initialize

<br />
$( document ).ready(function() {<br />
$(“.emailaddress”).emailautocomplete();<br />
});

$( document ).ready(function() {

$(“.emailaddress”).emailautocomplete();

});

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

<br />
domains: [“phpgang.com”] // add your own domains

1	domains: [“phpgang.com”] // add your own domains

After adding your own domains plugin initialize code look like below sample.

<br />
$( document ).ready(function() {<br />
$(“.email”).emailautocomplete({<br />
domains: [“phpgang.com”,”facebook.com”] // add your own domains<br />
});<br />
});