jQuery Plugin For Email Address Auto Complete - mailtip

jQuery Plugin For Email Address Auto Complete - mailtip
File Size: 88.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

mailtip is an useful jQuery plugin that popups a suggestion box with email addresses from the auto complete list while an 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" />

2. Style the email suggestion box via CSS.

ul.mailtip {
float: none;
background-color: #fcfeff;
list-style: none;
border: 1px solid #97bccc;
border-radius: 0px 0px 10px 10px;
overflow: hidden;
border-top: none;
}
ul.mailtip li p {
text-align: left;
line-height: 30px;
cursor: pointer;
margin: 0 9px;
overflow: hidden;
word-wrap: break-word;
height: 30px;
}
ul.mailtip li:last-child {
border-radius: 0px 0px 10px 10px;
}
ul.mailtip li.active {
background: #eaeaea;
}
ul.mailtip li.hover {
background: #e7f6ff;
}

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="./src/jquery.mailtip.js"></script>

4. Initialize the plugin with options.

<script type="text/javascript">
$(function (){
$('#demo').mailtip({
mails: ['@aol.com', '@gmail.com', '@msn.com', '@hotmail.com', '@outlook.com', '@yahoo.com'], // email autocomple list
onselected:: $.noop, // callback on selected
width: 'auto',
offsetTop: 0,
offsetleft: 0,
zindex: 1000
}
});
});
</script>

Change log:

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.