使用js实现的邮箱自动补全

1.页面代码
<input type="text" id="username" name="username" list="input_list"/><datalist id="input_list"></datalist>

<script src="/static/test.js" type="application/javascript"></script>

2.JS代码
tsc = {};
tsc.result = {
//初始化页面
init: function () {
//初始化绑定事件
tsc.result.event();
},
//给标签绑定事件
event : function(){
tsc.result.inputlist($('#username'),$('#input_list'));
},
//邮箱账号补全的方法
inputlist : function (input,list) {
var mailBox = [
"@163.com",
"@126.com",
"@qq.com",
"@sina.com",
"@yahoo.com"
];
input.bind('input propertychange',function(){
var key = input.val();
if(key.indexOf('@') != -1){
key = key.slice(0,key.indexOf('@'));
var mailBoxLen = mailBox.length;
var html = "";
for(var i = 0; i < mailBoxLen; i++){
html += '<option value="'+ key + mailBox[i] + '"></option>';
}
list.html(html);
}else{
list.html('');
}
})
}
};

$(function(){
tsc.result.init();
});