javascript 实现的智能邮箱后缀提示

by gothic

HTML

<div id="login_box" method="post">
	<div class="clearfix">
		<label for="email">电子邮箱：</label>
		<input type="text" id="email" autocomplete="off" />
		<button>提交</button>
	</div>
	<ul id="email_list">
		<li>请选择邮箱类型</li>
        <li></li>
		<li>@163.com</li>
		<li>@126.com</li>
		<li>@qq.com</li>
		<li>@yahoo.com.cn</li>
		<li>@gmail.com</li>
		<li>@sohu.com</li>
		<li>@hotmail.com</li>
	</ul>
</div>

CSS

#login_box { position:relative; }
.clearfix label { font-size:14px; float:left; }
.clearfix { height:30px; line-height:30px; }
.clearfix:after { height:0; visibility:hidden; content:"."; overflow:hidden; display:block; }
#email { width:180px; height:18px; border:1px solid #74c9e6; padding:5px 6px; background:#fff; margin-left:10px; -moz-border-radius:2px; border-radius:2px; font-family:arial; float:left; }
#email_list { padding-left: 0; width:192px; list-style:none; border:1px solid #74c9e6; -moz-border-radius:0 0 2px 2px; border-radius:2px; position:absolute; top:29px; left:80px; background:#fff; display:none; }
#email_list li { width:100%; height:30px; line-height:30px; text-indent:10px; cursor:pointer; overflow:hidden; }
#email_list li.first_li { cursor:default; }
#email_list .current { background:#baeafb; }

JavaScript

(function(){

		/* 初始化 */
		var emailInput = document.getElementById('email'),
			list = document.getElementById('email_list'),
			items = list.getElementsByTagName('li'),
			item1 = items[1],
			len = items.length,
			suffix = [],
			newSuffix, indexA, indexB,
			highlight = 'current',
			isIE = navigator.userAgent.toLowerCase().indexOf('msie') != -1,
			clearClassname = function(){
				for(var i = 1,el;i < len && (el = items[i]);i++){
					el.className = '';
				}
			};

		/* 将邮箱后缀存放到一个新数组中 */
		for(var j = 1,el;j < len && (el = items[j]);j++){
			suffix[suffix.length++] = el.innerHTML;
		}

		/* 邮箱输入框绑定keyup事件 */
		emailInput.onkeyup = suggest;

		/* suggest核心部分 */
		function suggest(event){
			var e = event || window.event,
				eCode = e.keyCode,
				val = this.value,
				index = val.indexOf('@'),
				isIndex = index !== -1;

			clearClassname();
			//输入框不为空
			if(val){
				item1.className = highlight;
				list.style.display = 'block';
				for(var i = 1,el;i < len && (el = items[i]);i++){
					el.onmouseover = function(){
						clearClassname();
						item1.className = '';
						this.className = highlight;
						indexA = 1;
						indexB = 0;
					}
					el.onmouseout = function(){
						this.className = '';
						item1.className = highlight;
					}
					el.onclick = function(){
						emailInput.value = this.innerHTML;
					}
				}
			}
			//输入框为空
			else{
				item1.className = '';
				for(var i = 1,el;i < len && (el = items[i]);i++){
					el.onmouseout = el.onmouseover = el.onclick = null;
				}
				if(eCode === 38 || eCode === 40 || eCode === 13) return;
			}

			item1.innerHTML = val;
			newSuffix = [];  //初始化空数组
			for(var i = 1, el ;i < len && (el = items[i]);i++){
				/* 以邮箱后缀和输入框中@标志符后是否
				   有相同的字符串来显示或隐藏该元素 */
				el.style.display = isIndex && el.innerHTML.indexOf(val.substring(index)) === -1 ? 'none' : 'block';
				if( i > 1 ) el.innerHTML = (isIndex ? val.substring(0,index) : val) + suffix[i-1];
				/* 出现@标志符时将新的元素的排列顺序
				   存放到空数组newSuffix中...