前面我讲过jQuery访新浪登录，输入用户名，自动提示Email后缀，这里改进一下，看下效果图：
s代码如下：
<script type="text/javascript">
var suffix = ["qq.com", "126.com", "163.com", "gmail.com", "sina.com", "yahoo.com", "hotmail.com"];//Email后缀
$(document).ready(function() {
$("#txtEmail").keyup(function(e) {//输入
var key = (e.keyCode) || (e.which) || (e.charCode);
if (key != 38 && key != 40 && key != 13) {
$("#eSuggest").empty().addClass("hidden");
var val = $("#txtEmail").val();
var prefix = (val.indexOf('@') != -1) ? val.split('@')[0] : val;
for (var i = 0; i < suffix.length; i++) {
var semail = prefix + "@" + suffix[i];
if (semail.indexOf(val) != -1) {
$("#eSuggest").removeClass("hidden").append("<li>" + semail + "</li>");
}
}
if ($("#eSuggest").hasClass("hidden") != true) {
$("#eSuggest li").each(function() {//遍历
$(this).mouseover(function() {
$(this).addClass("select");
});
$(this).mouseout(function() {
$(this).removeClass("select");
});
$(this).click(function() {
$("#txtEmail").val($(this).text()); //获得选中的值
$("#eSuggest").empty().addClass("hidden"); //隐藏
});
});
}
}
});
});
$(document).click(function() {//单击页面隐藏
$("eSuggest").empty().addClass("hidden");//隐藏
});
$(document).keyup(function(e) {//键盘事件
var key = (e.keyCode) || (e.which) || (e.charCode); //兼容IE和Firefox
if (key == 38) {//键盘向上
$("#eSuggest li").eq(getUpIndex()).addClass("select");
getValue();
}
if (key == 40) {//键盘向下
$("#eSuggest li").eq(getDownIndex()).addClass("select");
getValue();
}
if (key == 13) {//键盘回车
$("#eSuggest").empty().addClass("hidden");
}
});
var getDownIndex = function() {//获得向下索引
var index = 0;
var len = $("#eSuggest li").size();
for (var i = 0; i < len; i++) {
if ($("#eSuggest li").eq(i).hasClass("select")) {
$("#eSuggest li").eq(i % len).removeClass("select");
index = i + 1;
}
}
return index > (len - 1) ? 0 : (index % len);
};
function getUpIndex() {//获取向下索引
var len = $("#eSuggest li").size();
var index = len - 1;
for (var i = 0; i < len; i++) {
if ($("#eSuggest li").eq(i).hasClass("select")) {
$("#eSuggest li").eq(i % len).removeClass("select");
index = i - 1;
}
}
return (index < 0) ? (len - 1) : (index % len);
}
function getValue() {
var len = $("#eSuggest li").size();
for (var i = 0; i < len; i++) {
if ($("#eSuggest li").eq(i).hasClass("select")) {
$("#txtEmail").val($("#eSuggest li").eq(i).text());
}
}
}
</script>
html代码很简单，一个文本框，一个<ul>标记就行了，代码如下：
<input type="text" id="txtEmail" class="text" /><ul id="eSuggest" class="passCard hidden"></ul>
ul隐藏，等用到的时候再显示出来！！！
样式表：
<style type="text/css">
.select{ cursor:pointer; background-color:#E0EEEE;}
.passCard{position:absolute;z-index:999999;width:auto;overflow:hidden;padding:0;margin:0;border:1px solid #ccc;background:#fff;text-align:left;}
.passCard li.note{ text-align:left; color:#999;}
.passCard li{font-size:12px;list-style:none;margin:0 1px;height:20px;padding:0 5px;clear:both;line-height:20px;cursor:pointer;color:#999;}
.select{background-color:#E8F4FC;}
.hidden{display:none;}
#eSuggest{width:250px;}
.text{width:250px;}
</style>
功能实现：
1、输入自动提示email
2、鼠标可选择
3、键盘上下键可选择，回车之后可实现自己想要的功能。
