最近单词自动补全

weixin_30429201

于 2018-04-28 09:50:00 发布

阅读量99

点赞数

原文链接：http://www.cnblogs.com/zhaozhou/p/8966015.html

版权

<!DOCTYPE html>
<html>
<head>
<title>自动补全</title>
<meta charset="UTF-8">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .autoBos{
            position: relative;
        }
        #autoBg{
            color: #ccc;
            border: none;
        }
        #autoBg,#autoText{
            height: 45px;
            padding: 0 10px;
            font-size: 26px;
            background: none;
        }
    </style>
</head>
<body>
<div class="autoBos">
    <input type="text" id="autoText">
    <input type="text" id="autoBg" readonly="readonly">
</div>

<script src="https://files.cnblogs.com/files/zhaozhou/jquery-2.1.1.min.js"></script>
<script>
    (function(){
        var data= ["about","装逼","ccccc","ddddd","eeeee","abcde"];
        $("#autoText").keyup(function(){
            var value = $(this).val();
            for(var i=0;i<data.length;i++){
                if(data[i].indexOf(value)!=-1&&value.length>0){
                    $("#autoBg").val(data[i]);
                    break;
                }else{
                    $("#autoBg").val("");
                }
            }
        });
        // 监听键盘table键补全
        $(document).keyup(function(event){
            if(event.keyCode == 9){
                event.preventDefault();
                if($("#autoBg").val().length>1){
                    $("#autoText").val($("#autoBg").val());
                }
            }
        });
    })();
</script>
</body>
</html>

　　效果图

转载于:https://www.cnblogs.com/zhaozhou/p/8966015.html

weixin_30429201

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
最近单词自动补全

<!DOCTYPE html><html><head><title>自动补全</title><meta charset="UTF-8"> <style> *{ margin: 0; padding: 0; ...
复制链接

扫一扫