JavaScript搜索框项目
<!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 id="box"> <input type="text" id="txt" value=""/> <input type="button" value="搜索" id="btn"/> </div> <script src="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) { //如果页面中有这个div,则删除 if(my$("dv")) { my$("box").removeChild(my$("dv")); } return; } //创建div,把div加入id为box的div中 var dvObj = document.createElement("div"); my$("box").appendChild(dvObj); dvObj.id = "dv"; dvObj.style.width = "350px"; dvObj.style.border = "1px solid #ccc"; //循环遍历临时数组,创建对应的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 = "2px"; pObj.style.marginLeft = "5px"; //鼠标进入 pObj.onmouseover = function () { this.style.backgroundColor = "yellow"; }; //鼠标离开 pObj.onmouseout = function () { this.style.backgroundColor = ""; }; } }; </script> </body> </html>
common.js代码:
/** * Created by Administrator on 2018/7/22. */ 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) {//true 支持 return element.firstElementChild; } else { 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 = node.previousSibling; } return node; } } //为任意元素绑定任意事件 //参数1:任意元素 //参数2:事件类型 //参数3:事件处理函数 function addEventListner (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; } }
