自动补全（邮箱）



自动补全ui

一、调用autocomplete（）

 

var host=['aa','aaa','aaaa','bbbbb'];

$('#email').autocomplete({

   source:host

});

二、修改autocomplete样式

三 、autocomplete（）属性

四、autocomplete（）事件

 

 

邮箱自动补全

一、

$('#email').autocomplete({

   source:function(request,response){

      //获取用户输入的内容

      //alert(request.term);

      //绑定数据源，注意：response不会根据 你输入的数据过滤无关结果

      response(['aa','aaa','aaaa','bbb']);

   }

});

二、

$('#email').autocomplete({

   autoFocus:true,

   source:function(request,response){

      //获取用户输入的内容

      //alert(request.term);

      //绑定数据源，注意：response不会根据 你输入的数据过滤无关结果

      //response(['aa','aaa','aaaa','bbb']);

      var hosts=['qq.com','163.com','163.com','sina.com.cn','gmail.com','hotmail.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){

        //如果用户已经输入@和后面的域名，那么就找到相关的域名提示，比如bnbbs@1，就提示bnbbs@163.com

        //如果用户没有输入@或后面的域名，那么就把所有的域名都提示出来

        var findedHosts=[];

        if(host){

   findedHosts=$.grep(hosts,function(value,index){

           returnvalue.indexOf(host)>-1;//若数组不为空

        });

        }else//数组为空时

        {

           findedHosts=hosts;

        }

        varfindedResult=$.map(findedHosts,function(value,index){

           return name+'@'+value;//返回一个新的数组

        });

        result=result.concat(findedResult);

      }

      response(result);

   }

});