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.  截图显示结果