jQuery Plugin For Email Address Auto Complete - mailtip

mailtip is a useful jQuery plugin that popups a suggestion box with email addresses from the autocomplete list while a user types into the email input field.

How to use it:

1. Create an email input field on the page.

<input id="demo" type="email" />

3. Include the latest version of jQuery and the jQuery mailtip plugin at the bottom of the page.

<script src="/path/to/cdn/jquery.min.js"></script>
<link rel="stylesheet" href="./css/mailtip.css"/>
<script src="./src/jquery.mailtip.js"></script>

4. Initialize the plugin on the mail input and override the default email list as follows:

$(function (){
  $('#demo').mailtip({
    mails: ['@aol.com', '@gmail.com', '@msn.com', '@hotmail.com', '@outlook.com', '@yahoo.com'],
  });
});

5. More plugin options.

$(function (){
  $('#demo').mailtip({
    width: 'auto',
    offsetTop: -1,
    offsetLeft: 0,
    zIndex: 10,
    onselected: function(mail){
      // do something
    }
  });
});

Changelog:

2022-10-08

• rename css class name and move inline style to css file

2015-11-11

• prevent default up and down keydown event

2015-09-23

• bugfix

2015-09-17

• fixed for Microsoft Edge.

---

This awesome jQuery plugin is developed by nuintun. For more Advanced Usages, please check the demo page or visit the official website.