jquery 实现 智能那个提示邮箱后缀

by gothic

HTML

<div class="ipt">
	<input type="text" name="uemail" id="uemail" placeholder="请输入常用邮箱"/>
	<ul class="autoul"></ul>
</div>

CSS

.ipt{ width:218px;}/* 输入框外围div */
input{ margin:0; padding-left:15px; padding-right:15px; width:184px;}/* 输入框 */
ul.autoul{  /* 下拉菜单 */

    width:216px;
	margin:0px;
	margin-top:-5px;
	padding:0px;
	color:#666;
	border:1px solid #666;
	border-top:0;
	overflow:hidden;
}
ul.autoul li.autoli{  /* 下拉菜单li */

	height:30px;
	display:block;
	list-style-type:none;
	text-align:left;
	cursor:pointer;
	font-size:14px;
	line-height:30px;
	padding-left:15px;
	padding-right:15px;
	overflow:hidden;
	/*当对象内文本溢出时显示省略标记*/
	text-overflow:ellipsis; 
}
.lihover{  /* 下拉菜单li高亮样式 */

	background-color:#eee;
}
span{ padding-right:2px;}/* li下文字 */
.showli{ display:block;}/* 经过过滤的li的样式 */

JavaScript

$(function(){

	//初始化邮箱列表
	var mail = new Array("sina.com","126.com","163.com","gmail.com","qq.com","vip.qq.com","hotmail.com","sohu.com","139.com","vip.sina.com","21cn.cn","189.cn","sina.cn");

	//把邮箱列表加入下拉
	for(var i=0;i<mail.length;i++){
	
		var $liElement = $("<li class=\"autoli\"><span class=\"ex\"></span><span class=\"at\">@</span><span class=\"step\">"+mail[i]+"</span></li>");
		$liElement.appendTo("ul.autoul");
	}

	//下拉初始隐藏
	$(".autoul").hide();

	//在邮箱输入框输入字符
	$("#uemail").keyup(function(){

		//keyup事件包括方向键↓(38)、方向键↑(40)、回车(13)、删除(del 8,delete 46)以及其他有输入的按键
        //首先是有输入的按键，使输入框有长度(因为删除事件也是判断匹配以及长度，所以只需要添加删除事件特有的动作，而不必在此处排除删除事件)
        if(event.keyCode!=38 && event.keyCode!=40 && event.keyCode!=13){

            //菜单展现，需要排除空格开头和"@"开头
            if( $.trim($(this).val())!="" && $.trim(this.value).match(/^@/)==null ) {

                $(".autoul").show();
                //同时去掉原先的高亮，把第一条提示高亮
                if($(".autoul li.lihover").hasClass("lihover")) {
                    $(".autoul li.lihover").removeClass("lihover");
                }
                $(".autoul li:visible:eq(0)").addClass("lihover");
            }else{//如果为空或者"@"开头
                $(".autoul").hide();
                $(".autoul li:eq(0)").removeClass("lihover");
            }

            //把输入的字符填充进提示，有两种情况：1.出现"@"之前，把"@"之前的字符进行填充；2.出现第一次"@"时以及"@"之后还有字符时，不填充
            //出现@之前
            if($.trim(this.value).match(/[^@]@/)==null){//输入了不含"@"的字符或者"@"开头

                if($.trim(this.value).match(/^@/)==null){
                    //不以"@"开头
                    $(this).next().children("li").children(".ex").text($(this).val());
                }
            }else{

                //输入字符后，第一次出现了不在首位的"@"
                //当首次出现@之后，有2种情况：1.继续输入；2.没有继续输入
                //当继续输入时
                var str = this.value;//输入的所有字符
                var strs = new Array();
                strs = str.split("@");//输入的所有字符以"@"分隔
                $(".ex").text(strs[0]);//"@"之前输入的内容
           ...