7.jQuery UI 邮箱自动补全

   通过自动补全source 属性的function 回调函数，来动态的设置数据源，以达到可以

实现邮箱补全功能。

一．数据源function

   自动补全UI 的source 不但可以是数组，也可以是function 回调函数。提供了自带的

两个参数设置动态的数据源。

$('#email').autocomplete({

source : function (request, response) {

alert(request.term);        //可以获取你输入的值

response(['aa', 'aaaa', 'aaaaaa', 'bb']);        //展示补全结果

},

});

注意：这里的response 不会根据你搜索关键字而过滤无关结果，而是把整个结果全部呈现出

来。因为source 数据源，本身就是动态改变的，就由自定义，从而放弃系统内置的搜索能力。

二．邮箱自动补全

$('#email').autocomplete({

autoFocus : true,

delay : 0,

source : function (request, response) {

var hosts = ['qq.com','163.com', '263.com', 'gmail.com', 'hotmail.com'],       //起始

term = request.term,       //获取输入值

ix = term.indexOf('@'),       //@

name = term,       //用户名

host = '',       //域名

result = [];       //结果

//结果第一条是自己输入
result.push(term);

if (ix > -1) {        //如果有@的时候

name = term.slice(0, ix);       //得到用户名

host = term.slice(ix + 1);       //得到域名

}

if (name) {

//得到找到的域名
var findedHosts = (host ? $.grep(hosts, function (value, index) {

return value.indexOf(host) > -1;

}) : hosts),

//最终列表的邮箱
findedResults = $.map(findedHosts, function (value, index) {

return name + '@' + value;

});

//增加一个自我输入
result = result.concat(findedResults);

}

response(result);

},

});