<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智能输入法</title>
    <style>
        *{margin:0;padding:0;}
        ul{list-style:none;}
        ul li{list-style:none;}
        .box{height:auto;margin:40px auto;width: 500px;}
        .write{width:500px;height:36px;border:1px solid #b8b8b8;padding-left:10px;}
        .box .ul li{width:100%;line-height: 36px;color:#1a67e2;padding-left:10px;}
        .box .ul li:hover{background-color: #F5F5F5;padding-left:10px;}
    </style>
</head>
<script src="js/jquery-3.1.0.min.js"></script>
<script>
    $(function () {
        var main=['啊，祖国真美','不对','成绩','得使劲了','饿不饿','服从安排','国家繁荣昌盛','河北石家庄景点有哪些','这个i不能单独的存在','金鸡独立','阔以','可不可以嘛','你感觉在南方好呢还是北方好','真难写','我好笨的','大家都去复制','我竟然在这里打汉字','我也是无语了','对自己的做法','醉了','这点数据是不是少了点啊','算了','在造点吧','哎，根本不知道说什么呢','医生经常说哪些','关于病历的描述','是不是大家都想知道啊','来','请个大师','告诉你','哈哈哈','被我骗了吧','哪有什么大师啊','你是不是想多了','打在这里','我有不知道说个啥了','就这样吧','到此一游','瞎说了','开始干代码吧']
        window.localStorage.setItem('mainAttr',main)

        var mainAttr1=window.localStorage.getItem('mainAttr')
          var mainArr=mainAttr1.split(",");
        //输入时候，判断数组中是否有带有目标字，若有，就展示在下边列表中
        $(".write").on("input",function (){
            $(".ul").children().remove()
             for (var i=0;i<mainArr.length;i++){
                      if(mainArr[i].indexOf($(this).val())>-1){
                          $(".ul").append('<li onclick="insert(this)">'+mainArr[i]+'</li>')
                      }
             }
        });
        //按下backspace键时input的值为空时，清除下边的li的值
        del=function (event){
            var e = event;
            if (e.keyCode === 8) {
                if (e.target.value =='') {
                    $(".ul").children().remove()
                }
            }
        };
        //点击谁，谁就进入input输入框
        insert=function (e){
            $(".write").val("");
           $(".write").val($(e).text());
            $(".ul").children().remove()
        }
    })
</script>
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onbeforecopy="return false" oncopy=document.selection.empty() onselect=document.selection.empty()>
<div class="box">
    <input type="text" class="write"  onkeyup="del(event)">
    <ul class="ul">
       <!-- <li>这个是用来展示智能提示的</li>
        <li>你是谁</li>
        <li>你真美</li>
        <li>你真的非常漂亮</li>
        <li>原来你在这</li>-->
    </ul>
</div>
</body>
</html>