原生js 百度搜索小案例

1效果图

2css

		<style>
			#box {
				width: 450px;
				margin: 200px auto;
			}
			
			#txt {
				width: 350px;
			}
			
			#pop {
				width: 350px;
				border: 1px solid red;
			}
			
			#pop ul {
				margin: 10px;
				padding: 0px;
				width: 200px;
				list-style-type: none;
			}
			
			#pop ul li {}
		</style>

3html

<div id="box">
			<input type="text" id="txt" value="">
			<input type="button" value="搜索" id="btn">

		</div>

4js

		<script>
	function my$(id) {
				return document.getElementById(id);
			}

			function setInnerText(element, text) {
				if(typeof element.textContent == "undefined") {
					element.innerText = text;
				} else {
					element.textContent = text;
				}
			}
			var keyWords = ["小杨才是最纯洁的", "小杨才是最帅的", "小段是最猥琐的", "小超是最龌龊的", "苹果好吃", "苹果此次召回还是没有中国"];
			//获取文本框注册键盘抬起事件
			my$("txt").onkeyup = function() {

				//每一次的键盘抬起都判断页面中有没有这个div
				if(my$("dv")) {
					//删除一次
					my$("box").removeChild(my$("dv"));
				}
				//获取文本框输入的内容
				var text = this.value;
				//临时数组--空数组------->存放对应上的数据
				var tempArr = [];
				//把文本框输入的内容和数组中的每个数据对比
				for(var i = 0; i < keyWords.length; i++) {
					//是否是最开始出现的
					if(keyWords[i].indexOf(text) != -1) {
						tempArr.push(keyWords[i]); //追加
					}
				}
				//如果文本框是空的,临时数组是空的,不用创建div
				if(this.value.length == 0 || tempArr.length == 0) {
					//如果页面中有这个div,删除这个div
					if(my$("dv")) {
						my$("box").removeChild(my$("dv"));
					}
					//是onkeyup键盘抬起事件的函数
					return;
				}
				//创建div,把div加入id为box的div中
				var dvObj = document.createElement("div");
				my$("box").appendChild(dvObj);
				dvObj.id = "dv";
				dvObj.style.width = "350px";
				//dvObj.style.height="100px";//肯定是不需要的------
				dvObj.style.border = "1px solid green";
				//循环遍历临时数组,创建对应的p标签
				for(var i = 0; i < tempArr.length; i++) {
					//创建p标签
					var pObj = document.createElement("p");
					//把p加到div中
					dvObj.appendChild(pObj);
					setInnerText(pObj, tempArr[i]);
					pObj.style.margin = 0;
					pObj.style.padding = 0;
					pObj.style.cursor = "pointer";
					pObj.style.marginTop = "5px";
					pObj.style.marginLeft = "5px";
					//鼠标进入
					pObj.onmouseover = function() {
						this.style.backgroundColor = "yellow";
					};
					//鼠标离开
					pObj.onmouseout = function() {
						this.style.backgroundColor = "";
					};
				}
			};
		</script>