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);
		},
	});
});