DOM操作模拟搜索 | 易学教程

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	fieldset, img, input, button {
	border: none;
	padding: 0;
	margin: 0;
	outline-style: none;
	}

	ul, ol {
	list-style: none;
	margin: 0px;
	padding: 0px;
	}

	#box {
	width: 405px;
	margin: 200px auto;
	position: relative;
	}

	#txtSearch {
	float: left;
	width: 300px;
	height: 32px;
	padding-left: 4px;
	border: 1px solid #b6b6b6;
	border-right: 0;
	}

	#btnSearch {
	float: left;
	width: 100px;
	height: 34px;
	font: 400 14px/34px "microsoft yahei";
	color: white;
	background: #3385ff;
	cursor: pointer;
	}

	#btnSearch:hover {
	background: #317ef3;
	}

	#pop {
	width: 303px;
	border: 1px solid #ccc;
	padding: 0px;
	position: absolute;
	top: 34px;
	}

	#pop ul li {
	padding-left: 5px;
	}

	#pop ul li:hover {
	background-color: #CCC;
	}
	</style>
	</head>
	<body>
	<div id="box">
	<input type="text" id="txtSearch">
	<input type="button" value="百度一下" id="btnSearch">

	</div>

	<script>
	//模拟词库
	var datas = ["a", "abc", "abbbb", "abxxxx", "xyz", "abcdef", "abzzzz"];

	//步骤分析：
	//1 当键盘按键抬起时触发效果(keyup)
	//2 先根据当前输入内容，获取到可以显示的词
	//2.1 能满足条件的词必须以当前输入的内容为开头（词库词.indexOf(输入内容) ）
	//3 创建结构即可
	//3.1 提前设置好的样式对结构的创建也有要求 ( div，id设置为pop，内部结构为ul和li )
	//4 细节处理


	//实现：
	//1 获取元素
	var box = document.getElementById("box");
	var txt = document.getElementById("txtSearch");

	//2 给txt设置keyup事件
	txt.onkeyup = function () {
	//3 根据当前输入内容，到词库中匹配到满足条件的词
	var resultArr = [];//用于保存取出的词
	for (var i = 0; i < datas.length; i++) {
	if (datas[i].indexOf(this.value) == 0) {
	//将词取出
	resultArr.push(datas[i]);
	}
	}

	//--------------
	//对可能已经存在的pop结构进行删除
	//如果页面中已经存在了旧的列表，这个标签一定具有id，叫pop
	var pop = document.getElementById("pop");
	//检测pop的值，如果为null，不需要删除，如果不是null，删除即可
	if (pop) {
	box.removeChild(pop);
	}
	//---------------
	//如果当前没有输入内容，不进行新的结构创建
	if (txt.value == "") {
	return;
	}

	//如果没有匹配到词，不需要进行后续的结构创建
	if (resultArr.length == 0) {
	return;
	}

	//---------------
	//4 根据取出的词创建结构(需要考虑样式问题)
	var div = document.createElement("div");
	div.id = "pop";
	box.appendChild(div);

	var list = document.createElement("ul");
	div.appendChild(list);

	//遍历取出的词，进行li的创建
	var li;
	for (var i = 0; i < resultArr.length; i++) {
	li = document.createElement("li");
	setText(li, resultArr[i]);
	list.appendChild(li);
	}


	};

	function setText(element, xinText) {
	if (typeof element.innerText == "string") {
	//说明支持innerText属性
	element.innerText = xinText;
	} else {
	//说明支持textContent
	element.textContent = xinText;
	}
	}
	</script>
	</body>
	</html>

来源：https://www.cnblogs.com/tianjinlll/p/11397324.html

标签

dom

pop