使用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 += '+ mailBox[i] + '">';
                }
                list.html(html);
            }else{
                list.html('');
            }
        })
    }
};

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


你可能感兴趣的:(javascript)