<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>js实现邮箱自动匹配</title>
<meta name="Author" content="Michael">
<meta name="Keywords" content="js实现邮箱自动匹配">
<meta name="Description" content="js实现邮箱自动匹配">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.js"></script>
<style type="text/css">
#divForInput{border:solid #87A900 2px;width:210px;padding-top:3px;height:25px;}
#kw{border:0;height:18px;font-size:14px;padding-left:5px;width:200px;font-size:16px;}
#searchResult{display:none;position:absolute;border:solid #87A900 2px;border-top:0;width:210px;}
.email{padding:3px 5px;width:200px;overflow:hidden;cursor:pointer;}
.email:hover{background:#87A900;}
</style>
</head>
<body>
<div id="searchResult"></div>
<div style="font-weight:bold;padding:0 0 5px 0">请输入邮箱号：</div>
<div id="divForInput"><input type="text" id="kw" /></div>
<script type="text/javascript">
//定义各种邮箱类型
var emai = [
‘@qq.com‘,
‘@163.com‘,
‘@126.com‘,
‘@139.com‘,
‘@189.com‘,
‘@gmail.com‘,
‘@hotmail.com‘,
‘@sina.com‘,
‘@sina.cn‘,
‘@yahoo.com.cn‘,
‘@yahoo.cn‘,
‘@sohu.com‘
];
$(document).ready(function(){
$("#kw").keyup(function(){
var kw = jQuery.trim($(this).val());
if(kw == ""){
$("#searchResult").hide();
return false;
}
var index = kw.indexOf("@");
if(index<0){
$("#searchResult").hide();
return false;
}
var startStr = kw.substring(0, index);
var endStr = kw.substring(index);
var reg = /.*[\u4e00-\u9fa5]+.*$/;
if(reg.test(startStr)){ //邮箱号不能有汉字
return false;
}
var html = "";
var left = $(this).offset().left;
var top = $(this).offset().top;
$("#searchResult").css("left",left - 2);
$("#searchResult").css("top",top + 26);
for (var i = 0; i < emai.length; i++) {
if (emai[i].indexOf(endStr) >= 0) {
html = html + "<div class=‘email‘ onclick=‘getEmail(this);‘>" + startStr + emai[i] + "</div>"
}
}
if(html != ""){
html = "<div style=‘padding:5px 5px 0;‘>请选择邮箱类型</div>"+html;
$("#searchResult").html(html).show();
}else{
$("#searchResult").hide();
}
});
});
function getEmail(obj){
$("#kw").val($(obj).html());
$("#searchResult").hide();
}
</script>
</body>
</html>