jquery UI邮箱自动补全
《1》
自动补全（autocomplete），是一个可以减少用户输入完整信息的UI 工具。一般在输入邮箱、搜索关键字等，然后提取出相应完整字符串供用户选择。
首先要引入jquery UI里面的两个包 一个是 jquery-ui.js、jquery-ui.css
<html>
<head>
<title></title>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/jquery-ui.js"></script>
<link href="js/jquery-ui.css" rel="stylesheet" />
</head>
<body>
<input id="email" type="text" />
</body>
</html>
<script type="text/javascript">
$("#email").autocomplete({
delay: 0, //默认为300 毫秒，延迟显示设置。
autoFocus:true, //设置为true 时，第一个项目会自动被选定。
//request是一个对象，它有一个属性term ，term表示用户输入的内容。
//response的作用是用来绑定数据源的 例如：response(["aa","aaaa","aaaaaa","bb"])
source: function (request, response) {
var hosts = ["qq.com", "163.com", "263.com", "sina.com.cn", "gmail.com", "hotmail.com"];//邮箱域名集合
var term = request.term; //获取用户输入的内容；
var name = term; //邮箱的用户名
var host = ""; //邮箱的域名 例如qq.com
var ix = term.indexOf('@'); //@的位置
var result = []; //最终呈现的邮箱列表
//当用户输入的数据（email）里存在@的时候，就重新给用户名和域名赋值
if (ix > -1) { //如果@符号存在，就表示用户已经输入用户名了。
name = term.slice(0, ix);
host = term.slice(ix + 1);
}
if (name) { //如果name有值 即：不为空
//如果用户已经输入@和后面的全部或部分域名，那么就找到相关的域名提示，比如abc@1 就提示[email protected]
//如果用户还没有输入@或后面的域名。那么就把所有的域名都提示出来
var getHosts = []; //根据用户名填写的域名我们在hosts里面找到对应的域名集合
if (host) { //并且host也有值的时候
getHosts = $.grep(hosts, function (val, key) { // 给getHosts赋值
if (val.indexOf(host) > -1) {
return val;
};
});
}
else {
getHosts = hosts;
}
var abc = $.map(getHosts, function (val) { //这个val就是getHosts里的每个域名元素。
return name + "@" + val;
});
result.push(term);//假如我只定义了qq.com，和163.com这两个邮箱列表，那么在用户输入其他的邮箱的时候我也有提示的功能，比如我在输入[email protected]的时候，我也有提示的功能。 这时候，我就需要将用户输入的数据添加到result这个邮箱域名集合当中
result = result.concat(abc);//然后再将abc这个集合也加入到result当中 形成一个新的数组然后赋值给result
}
//result.push(term); //或者这样也行，不过这样的话用term就在数组里面的位置就是最后一个了。提示的时候也就在最后一个了。我们一般想让它显示在第一个
//result.unshift(term); //或者这样也行; unshift方法的作用是：将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
response(result);
}
});
</script>
下面我们可以将上面的那段代码小小的优化一下
<html>
<head>
<title></title>
<script src="js/jquery-1.11.2.js"></script>
<script src="js/jquery-ui.js"></script>
<link href="js/jquery-ui.css" rel="stylesheet" />
</head>
<body>
<input id="email" type="text" />
</body>
</html>
<script type="text/javascript">
$("#email").autocomplete({
delay: 0, //默认为300 毫秒，延迟显示设置。
autoFocus:true, //设置为true 时，第一个项目会自动被选定。
source: function (request, response) {
var hosts = ["qq.com", "163.com", "263.com", "sina.com.cn", "gmail.com", "hotmail.com"];//邮箱域名集合
var term = request.term; //获取用户输入的内容；
var name = term; //邮箱的用户名
var host = ""; //邮箱的域名 例如qq.com
var ix = term.indexOf('@'); //@的位置
var result = []; //最终呈现的邮箱列表
//当用户输入的数据（email）里存在@的时候，就重新给用户名和域名赋值
if (ix > -1) { //如果@符号存在，就表示用户已经输入用户名了。
name = term.slice(0, ix);
host = term.slice(ix + 1);
}
if (name) { //如果name有值 即：不为空
var getHosts = []; //根据用户名填写的域名我们在hosts里面找到对应的域名集合
getHosts= host ? ($.grep(hosts, function (val) { return val.indexOf(host) > -1 })) : hosts;
result = $.map(getHosts, function (val) { //这个val就是getHosts里的每个域名元素。
return name + "@" + val;
});
}
result.unshift(term); // unshift方法的作用是：将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
response(result);
}
});
</script>