August 17, 2016 7:31 am

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.

Email autocomplete on your forms with jQuery

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

2. Create email input

3. Plugin Initialize

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

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

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.

source

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories: