在这里我们只是简单的用数组模拟了一下数据库中的数据
html代码如下:
<div class="box" id="box">
<input type="text" name="content" class="content" id="txt"/>
<button>搜索</button>
<!--<div class="pop" id="pop">
<ul>
<li>a</li>
<li>aaa</li>
<li>aaaa</li>
</ul>
</div>-->
</div>
css样式:
<style>
.box{
width: 650px;
height: 400px;
/*border: 1px solid gray;*/
margin:100px auto;
}
.content{
width: 486px;
height: 30px;
float: left;
padding-left:10px;
}
button{
width: 80px;
height: 35px;
float: left;
margin-left:20px;
font-size:18px;
}
#pop{
margin-top:0;
width: 498px;
height: 300px;
border: 1px solid gray;
border-top:0;
float: left;
}
ul{
list-style: none;
margin:0;
padding:0;
}
ul li{
margin-left:10px;
margin-top:10px;
cursor: pointer;
height: 30px;
line-height:30px;
}
ul li:hover{
background-color: gray;
}
</style>
js代码如下:
<script>
//获取输入框
var txt = document.getElementById("txt");
var arr = ["今晚吃鸡","泪点","画画","evan","evan_qb","evanevan"];
var box = document.getElementById("box");
//输入文字
txt.onkeyup = function(){
//判断当前值是否是已经存储数据的开头
var arr2 = [];
for(var i = 0;i<arr.length;i++){
if (arr[i].indexOf(this.value) === 0){
arr2.push(arr[i]);
}
}
//获取pop
var pop = document.getElementById("pop");
//如果输入的值为空
if(this.value.length === 0){
if (pop){
box.removeChild(pop);
}
return;
}
//不满足的情况
// 如果已经存在则先删除
if (pop){
box.removeChild(pop);
}
//如果arr2的长度为0
if(arr2.length === 0){
return;
}
//创建盒子
var div = document.createElement("div");
div.id = "pop";
// div.className = "pop";
box.appendChild(div);
//创建ul
var ul = document.createElement("ul");
div.appendChild(ul);
//将数组arr2的数据显示出来
for (var i = 0;i<arr2.length;i++){
var li = document.createElement("li");
li.innerHTML = arr2[i];
ul.appendChild(li);
}
}
txt.onblur = function(){
box.removeChild(pop);
}
</script>