百度搜索框制作

百度搜索框实现

好几天没有写文章了，今天想起了百度搜索框的实现，所以就来说一下这个吧

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="";
					}
				}

			}

运行结果：