jQuery中实现邮箱自动补齐功能

一.  jQuery中实现邮箱自动补齐功能

在jQuery中有autocomplete()方法（自动补全），是一个可以减少用户输入完整信息的UI工具。一般在输入邮箱、搜索关键字等，然后提取出相应完整字符串供用户选择。

1.调用autocomplete()方法实现邮箱自动补全

var findedHosts = $.grep(hosts,function(value,index){
                    return value.indexOf(host) > -1;
                });
            $('#email').autocomplete({
		delay : 0,
		autoFocus : true,
		source : function (request, response) {
			//获取用户输入的内容
			//alert(request.term);
			//绑定数据源的
			//response(['aa', 'aaaa', 'aaaaaa', 'bb']);
			
			var hosts = ['qq.com', '163.com', '263.com', 'sina.com.cn','gmail.com', 'hotmail.com'],
				term = request.term,		//获取用户输入的内容
				name = term,				//邮箱的用户名
				host = '',					//邮箱的域名
				ix = term.indexOf('@'),		//@的位置
				result = [];				//最终呈现的邮箱列表
				
				
			result.push(term);
			
			//当有@的时候，重新分别用户名和域名
			if (ix > -1) {
				name = term.slice(0, ix);
				host = term.slice(ix + 1);
			}
			
			if (name) {
				//如果用户已经输入@和后面的域名，
				//那么就找到相关的域名提示，比如bnbbs@1，就提示bnbbs@163.com
				//如果用户还没有输入@或后面的域名，
				//那么就把所有的域名都提示出来
				
				var findedHosts = (host ? $.grep(hosts, function (value, index) {
						return value.indexOf(host) > -1   //host为空时,返回0
					}) : hosts);

                                 //改进方法，不需要三目运算符，因为value.indexOf('') 为0
                                //var findedHosts = $.grep(hosts,function(value,index){
                                //     return value.indexOf(host) > -1;
                                //        });
					findedResult = $.map(findedHosts, function (value, index) {
					return name + '@' + value;
				});
				
				result = result.concat(findedResult);
			}
			
			response(result);
		},	
	});

2.  html代码

		<p>
			<label for="email">邮箱：</label>
			<input type="text" name="email" class="text" id="email" title="请输入正确的电子邮箱"/>
			<span class="star">*</span>
		</p>

3.  截图显示结果