利用jquery-ui插件，做输入邮箱时邮箱自动补全功能

1. 首先需要到www.jqueryui.com网站上下载最新版的ui插件，到www.jquery.com上面下载最新版的jquery框架，并引入到html文件中， 一般的为jquery-ui.js文件，一个jquery-ui.css文件和jquery.js文件

2. html文件代码如下：

	
	
	
		  
        
	


	
	

	
		邮箱：
		
		
	
	

3. index.js 文件代码如下

$(function(){
        $('#email').autocomplete({
		delay:0,
		autoFocus:true,
		source:function(request,response){
			var hosts=['qq.com','163.com','263.com','sina.com','gmail.com','126.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){
			//如果用户已经输入@和后面的域名,就找到相关的域名提示，
			//如果用户还没有输入@后面的域名，那么就把所有的域名都提示出来
			var findedHosts=(host?$.grep(hosts,function(value,index){
					return value.indexOf(host)>-1
				}):hosts);
			
			var findedResult=$.map(findedHosts, function(value,index){
				return name+'@'+value;
			});
			result=result.concat(findedResult);
		}	
			response(result);
		}
	});
});

这样子就完成了邮箱自动补全的功能，赶快试一试吧！~