百度搜索框实现
好几天没有写文章了,今天想起了百度搜索框的实现,所以就来说一下这个吧
css代码:<style>
#box {
width: 450px;
margin: 200px auto;
}
#txt {
width: 350px;
}
</style>
html代码:
<div id="box">
<input type="text" name="" id="txt" />
<input type="button" value="搜索" id="btn" />
</div>
js代码:
var keyWords = ["我喜欢孤独的天才", "孤独的天才是我", "我爱的人很多", "程序员的惨淡人生", "什么叫帅", "我现在就很特别"];//要出现在搜索框下面的提示文字
document.getElementById("txt").onkeyup = function() {//定义键盘抬起事件进行追踪
if(document.getElementById("dv")){//每次按下抬起时都要先清除一下div以免乜有数据时扔存在div边框
document.getElementById("box").removeChild(document.getElementById("dv"));
}
var tempArr = [];//定义临时数组用来存储用户与之相匹配的句子
var text = this.value;//获取用户所输入的文本框内容
for(var i = 0; i < keyWords.length; i++) {
if(keyWords[i].indexOf(text) == 0) {//将用户输入的文本框内容与数组进行比对,输入内容在数组中匹配到,并且开头的值存入临时数组中
tempArr.push(keyWords[i]);
}
}
console.log(tempArr);
var dvObj = document.createElement("div");//创建一个div用来放提示的语句
document.getElementById("box").appendChild(dvObj);
dvObj.id="dv";
dvObj.style.width = "350px";
dvObj.style.border = "1px solid green";
if(this.value.length==0||tempArr.length==0){//当文本框中乜有内容或者临时数组中没有元素是将div进行删除
if(document.getElementById("dv")){
document.getElementById("box").removeChild(document.getElementById("dv"));
}
// return;
}
for(var i=0;i<tempArr.length;i++){//创建临时数组长度个的p元素用来显示提示的语句
var pObj=document.createElement("p");
dvObj.appendChild(pObj);
pObj.style.margin="0";
pObj.style.padding="0";
pObj.style.marginTop="5px";
pObj.style.marginLeft="5px";
pObj.style.cursor="pointer";
pObj.innerHTML=tempArr[i];
pObj.function(){
this.style.backgroundColor="yellow";
}
pObj.function(){
this.style.backgroundColor="";
}
}
}
运行结果: