<!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; 500px;}
.write{500px;height:36px;border:1px solid #b8b8b8;padding-left:10px;}
.box .ul li{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>