html5输入框自动补全,jQuery实现文本框邮箱输入自动补全效果

邮箱自动完成的效果在网站上大多都看过，但是质量参差不齐，今天突然在网上看到一篇博客，感觉这个插件很好，就想来写一下分享给大家！

效果图如下：

完整demo代码如下：

邮箱地址自动完成功能

.demo p {width:1000px; margin-left:auto; margin-right:auto;}

.input{padding:12px; width:300px; border:1px solid #c2c2c2; border-radius:4px; box-shadow:0 0 1px #fff, inset 0 0 2px rgba(0,0,0,.15); background-color:#F2F2F2; font-size: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;}

.emailist .on, .emailist li:hover{background-color:#eee;}

$(".inputMailList").mailAutoComplete();//使用方法

js实现效果代码(jquery.mailAutoComplete-4.0.js)如下：

(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: 11

};

// 最终参数

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

};

// 组装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 + '

'+ arrValue[0] + "@" + email +'';

});

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 = $('

position: "absolute",

marginTop: element.offsetHeight,

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");

$(this).css(visibility, "hidden");

element.focus(); // add on 2013-11-20

}

});

$(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");

}

},

"keydown": 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());

eleUl.css("visibility", "hidden");

break;

}

case key.tab: case key.esc: {

eleUl.css("visibility", "hidden");

break;

}

}

if (element.indexSelected !== -1) {

eleUl.html(fnEmailList(element));

}

}

}

});

});

};

})(jQuery);

以上就是本文的全部内容，希望对大家的学习有所帮助。