我们都发过邮件，在填写收件人的时候是可以同时填多个收件人的，那么在我们前端页面上用到这个功能的话要怎么实现呢？今天就简单模拟一下QQ邮箱收件人的填写功能。

话不多说，直接上主要代码：

HTML

<div class="wd_config_group clearfix">
<label class="wd_config_tip fl">收件地址：</label>
<div class="input_area fl clearfix" id="in_box" onclick="getFocus();">
<div class="mail_input fl">
<input type="email" class="inputMailList" id="inputMailList" name="email" autocomplete="off">
</div>
</div>
<span id="ruler"></span>
</div>

CSS

/*邮箱自动填充*/
.input_area{
position: relative;
padding: 0 13px 0 5px;
width:516px;
font-size: 14px; 
line-height: 30px; 
border:1px solid #ccc; 
border-radius:5px; 
box-sizing: border-box; 
margin-top: 5px;
margin-left: 14px;
}
.emailist{
border:1px solid #bdbdbd; 
border-radius: 4px; 
background-color:#fff; 
color:#666; 
font-size:14px; 
list-style-type:0; 
padding:0; 
margin:0; 
overflow:hidden;
}
.emailist li{
padding:2px 11px; 
cursor:pointer;
line-height: 20px;
}
.emailist .on, .emailist li:hover{
background-color:#eee;
}
.mail_list{
line-height: 20px;
cursor: default;
max-width: 100%;
margin: 5px 0;
}
.mail_list:hover{
background-color: #e0ecf9;
}
.mail_list span{
margin: 0 3px;
max-width: 100%;
word-wrap: break-word;
}
.selected,.selected:hover{
background-color: #528bcb;
color: #fff;
}
.mail_input{
width: 13px;
}
.mail_input input{
display: inline-block;
width: 100%;
border: none;
outline: none;
font-size: 14px;
line-height: 30px;
padding: 0 5px;
}
#ruler { 
visibility: hidden; 
white-space: nowrap;
position: absolute;
left: 0;
}

JS

基于jQuery的插件，首先要引入JQ，再引入该插件

/**
* 多收件人邮箱自动填充功能
*/
(function($) {
$.fn.mailAutoComplete = function(options) {
var defaults = {
className: "emailist",
email: ["qq.com","gmail.com","126.com","163.com","hotmail.com","yahoo.com","yahoo.com.cn","live.com","sohu.com","sina.com"], //邮件数组
zIndex: 99 
};
// 最终参数
var params = $.extend({}, defaults, options || {});

// 是否现代浏览器
var isModern = typeof window.screenX === "number", visibility = "visibility";
// 键值与关键字
var key = {
"up": 38,
"down": 40,
"enter": 13,
"esc": 27,
"tab": 9,
"semi_colon": 186,
"backspace": 8,
"delete": 46
};
// 组装HTML的方法
var fnEmailList = function(input) {
var htmlEmailList = '', arrValue = input.value.split("@"), arrEmailNew = [];
$.each(params.email, function(index, email) {
if (arrValue.length !== 2 || arrValue[1] === "" || email.indexOf(arrValue[1].toLowerCase()) === 0) { 
arrEmailNew.push(email); 
}
}); 
$.each(arrEmailNew, function(index, email) {
htmlEmailList = htmlEmailList + '<li'+ (input.indexSelected===index? ' class="on"':'') +'>'+ arrValue[0] + "@" + email +'</li>'; 
}); 
return htmlEmailList; 
};
// 显示还是隐藏
var fnEmailVisible = function(ul, isIndexChange) {
var value = $.trim(this.value), htmlList = '';
if (value === "" || (htmlList = fnEmailList(this)) === "") {
ul.css(visibility, "hidden"); 
} else {
isIndexChange && (this.indexSelected = -1);
ul.css(visibility, "visible").html(htmlList);
}
};

return $(this).each(function() {
this.indexSelected = -1;
// 列表容器创建
var element = this;
var eleUl = $('<ul id="' + params.className + '"></ul>').css({
position: "absolute",
marginTop: element.offsetHeight + "px", 
minWidth: element.offsetWidth - 2,
visibility: "hidden",
zIndex: params.zIndex
}).addClass(params.className).bind("click", function(e) {
var target = e && e.target;
if (target && target.tagName.toLowerCase() === "li") {
$(element).val(target.innerHTML).trigger("input");
fillMail(); 
$(this).css(visibility, "hidden");
element.focus();
} 
}); 
$(this).before(eleUl);
// IE6的宽度
if (!window.XMLHttpRequest) { eleUl.width(element.offsetWidth - 2); } 

// 不同浏览器的不同事件
isModern? $(this).bind("input", function() {
fnEmailVisible.call(this, eleUl, true);
}): element.attachEvent("onpropertychange", function(e) { 
if (e.propertyName !== "value") return;
fnEmailVisible.call(element, eleUl, true); 
});

$(document).bind({
"click": function(e) {
var target = e && e.target, htmlList = '';
if (target == element && element.value && (htmlList = fnEmailList(element, params.email))) {
eleUl.css(visibility, "visible").html(htmlList); 
} else if (target != eleUl.get(0) && target.parentNode != eleUl.get(0)) {
eleUl.css(visibility, "hidden");
}
$(".mail_list").removeClass("selected"); 
},
"keydown": function(e){
var selectedMail = $(".inputMailList").val();
var len = selectedMail.visualLength();
$(".mail_input").css({"width": len + 13 + "px"});
var hasFocus = $(".mail_input").find("input").is(':focus');
if(hasFocus){
if(e.keyCode == key.backspace || e.keyCode == key.delete){
if(selectedMail == ""){
var lastMail = $(".mail_list").last();
if($(".mail_list").hasClass("selected")){
$(".input_area .selected").remove();
}else{
lastMail.addClass("selected");
}
}
};
if(e.keyCode == key.semi_colon){
e.preventDefault(); // 阻止默认事件（阻止键入;号）
}
}
},
"keyup": function(e) {
var eleLi = eleUl.find("li");
if (eleUl.css(visibility) === "visible") {
switch (e.keyCode) {
case key.up: {
element.indexSelected--;
if (element.indexSelected < 0) {
element.indexSelected = -1 + eleLi.length; 
}
e.preventDefault && e.preventDefault();
break;
}
case key.down: {
element.indexSelected++;
if (element.indexSelected >= eleLi.length) {
element.indexSelected = 0; 
}
e.preventDefault && e.preventDefault();
break;
}
case key.enter: { 
e.preventDefault(); 
eleLi.get(element.indexSelected) && $(element).val(eleLi.eq(element.indexSelected).html());
fillMail();
eleUl.css("visibility", "hidden");
break;
}
case key.tab: case key.esc: {
eleUl.css("visibility", "hidden");
break;
}
case key.semi_colon: {
fillMail();
eleUl.css("visibility", "hidden");
break; 
}
}
if (element.indexSelected !== -1) {
eleUl.html(fnEmailList(element));
}
}else{
if(e.keyCode == key.semi_colon){
fillMail();
}
}
}
});
var fillMail = function(){
var selectedMail = $(element).val();
$(".mail_input").before("<div class='mail_list fl' onclick='getMail(this);'><span>" + selectedMail + ";</span></div>").css({"width": "13px"});
$(element).val("");
$("#ruler").html("");
eleUl.html("");
}
});
};
// 字符串原型上添加方法，获取文字的宽度
String.prototype.visualLength = function() { 
var ruler = $("#ruler"); 
ruler.text(this); 
return ruler[0].offsetWidth; 
}
})(jQuery);

最后是调用插件中邮箱自动提示方法

<script src="jquery-1.10.1.min.js"></script>
<script src="mailAutoComplete.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 调用邮箱自动提示方法
$("#inputMailList").mailAutoComplete();
})

function getFocus(){
$("#inputMailList").focus();
}

function getMail(obj){
event.stopPropagation();
$(obj).addClass("selected").siblings().removeClass("selected");
getFocus();
}
</script>

以上，就简单实现了邮箱多输入功能，具体效果，狠戳这里查看。

这个功能相比QQ邮箱还有一定的差距，我们，加油！