jquery UI学习笔记-知问前段之邮箱自动补全

首先贴出效果图：



学习要点：

1.数据源 function

2.邮箱自动补全

本节课，我们通过自动补全 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);
},
});

下面是源代码，延续上一篇的实例。

index.html代码和style.css还是和上一篇的一样：jquery
UI学习笔记-知问前端之自动补全工具UI，jquery UI学习笔记-知问前端之自动补全工具UI的tooltip

下面主要是index.js的代码发生了改变：

$(function(){
$('#search_button').button();
$('#reg').dialog({
autoOpen:true,
modal:true,
resizable:false,
width:320,
height:340,
buttons:{
'提交':function(){

}
}
});
$('#reg').buttonset();
$('#reg input[title]').tooltip({
position : {
my : 'left center',
at : 'right+5 center'/*right加上5个像素*/
},
});
$('#date').datepicker();
var srcArray=['aaa@163.com', 'bbb@163.com', 'ccc@163.com'];
$('#email').autocomplete({
delay:0,
autoFocus : true,
source:function(request,response){
var hosts=['qq.com','163.com','126.com','gmail.com','hostmail.com'],
term=request.term,//获取输入的内容
name=term,
host='',			//域名
ix=name.indexOf('@'),//获取@的位置
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);
},
});
});