<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <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> </head> <body> <div> <input type="text" value=""> <input type="button" value="搜索"> </div> <script src="https://www.jb51.net/common.js"></script> <script> 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) == 0) { tempArr.push(keyWords[i]); } } //如果文本框为空或者数组五元素，则删除所有div if (this.value.length == 0 || tempArr.length == 0) { if (my$("dv")) { my$("box").removeChild(my$("dv")); }//end if return; }// end if //遍历临时数组，创建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 red"; //循环遍历临时数组，在创建的div中添加p标签 for (var i = 0; i < tempArr.length; i++) { var pObj = document.createElement("p"); dvObj.appendChild(pObj); setInnerText(pObj, tempArr[i]); pObj.style.fontSize = "14px"; 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 = "pink"; }; pObj.onmouseout = function () { this.style.backgroundColor = ""; }; } } </script> </body> </html>
外部引入工具JS文件：
/* * 根据id属性的值，返回对应的标签元素 * */ function my$(id) { return document.getElementById(id); }; // 设置任意标签中的文本内容 function setInnerText(element, text) { // 判断浏览器是否支持这个属性 if (typeof element.textContent == "undefined") {//不支持 element.innerText = text; } else {//支持 element.textContent = text; } }; // 获取任意标签中的文本内容 function getInnerText(element) { if (typeof element.textContent == "undefined") { return element.innerText; } else { return element.textContent; } }; //获取任意一个父级元素的第一个子级元素 function getFirstElementChild(element) { if (element.firstElementChild) {//IE8支持 return element.firstElementChild; } else {//IE8不支持 var node = element.firstChild; while (node && node.nodeType != 1) {//不是标签 node = node.nextSibling; } return node; } } //获取任意一个父级元素的最后一个子级元素 function getLastElementChild(element) { if (element.lastElementChild) { return element.lastElementChild; } else { var node = element.lastChild; while (node && node.nodeType != 1) { node.previousSibling; } return node; } } //为任意元素绑定任意的事件。（元素，事件类型，处理函数） function addEventListener(element, type, fn) { //判断浏览器是否支持这个方法 if (element.addEventListener) { element.addEventListener(type, fn, false) } else if (element.attachEvent) { element.attachEvent("on" + type, fn) } else { element["on" + type] = fn; } } //为任意元素解绑事件 function removeEventListener(element, type, fnName) { if (element.removeEventListener) { element.removeEventListener(type, fnName, false); } else if (element.detachEvent) { element.detachEvent("on" + type, fnName); } else { element["on" + type] = null; } }