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

   },

});