jquery ui 学习随笔 邮箱自动补全

一．数据源function
自动补全UI 的source 不但可以是数组，也可以是function 回调函数。提供了自带的两个参数设置动态的数据源。
$('#email').autocomplete({
source : function (request, response) {
alert(request.term); //可以获取你输入的值
response(['aa', 'aaaa', 'aaaaaa', 'bb']); //展示补全结果     不论你输入什么，全部都会展示出下拉结果
},
});
注意：这里的response 不会根据你搜索关键字而过滤无关结果，而是把整个结果全部呈现出来。因为source 数据源，本身就是给你动态改变的，就由你自定义，从而放弃系统内
置的搜索能力。

$('#email').autocomplete({
delay:0,
source:function(request,response){
var hosts=['163.com','123.com','qq.com','gmail.com','sina.com.cn'],
term=request.term,         //获取用户输入的内容
host='',                    //邮箱的域名
ix=term.indexOf('@'),        //获取@d的位置
name=term,                    //邮箱的用户名
result=[];                    //最终的邮箱
//当存在@时，重新分配用户名和域名
if(ix>-1){
name=term.slice(0,ix);
host=term.slice(ix+1);
}
if(name){
//如果用户已经输入用户名和域名就找到相关的域名提示

//如果用户还没有输入用户名和域名那么就提示所有的域名
var findedhosts=[];
if(host){
//$.grep使用过滤函数过滤数组元素。
findedhosts=$.grep(hosts,function(value,index){
//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
return value.indexOf(host)>-1 ;
})
}
else{
findedhosts=hosts;
}
//$.map将一个数组中的元素转换到另一个数组中。
var finedResult=$.map(findedhosts,function(value,index){
return name+"@"+value;
})
result=finedResult;
}

response(result);
}
});

<div id="reg" title='会员登录'>
<p>
<label for="user">账户:</label>
<input type="text" name="user" class="text" title="请输入至少含有两个中文的昵称" id="user"/>
<span class="star">*</span>
</p>
<p>
<label for="password">密码:</label>
<input type="text" name="password" class="text" title="请输入至少含有六位数的密码" id="password"/>
<span class="star">*</span>
</p>
<p>
<label for="email">邮箱:</label>
<input type="text" name="email" class="text" title="请输入正确的邮箱"id="email"/>
<span class="star">*</span>
</p>
<p>
<label for="">性别:</label>
<input type="radio" name="sex" class="text"id="male"/><label for="male">男</label><input type="radio" name="sex" class="text"id="female"/><label for="female">女</label>
</p>
<p>
<label for="">生日:</label>
<input type="text" name="email" class="text" id="bir"/>
</p>
</div>

if(name){

var findedhosts=(host?$.grep(hosts,function(value,index){
//indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
return value.indexOf(host)>-1 ;
})    ):hosts),

finedResult=$.map(findedhosts,function(value,index){
return name+"@"+value;
})
result=finedResult;
}