<!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>
效果图
