步骤
- 定义一个keyWords字符串数组
- 获取所有需要的元素(获取文本框)
- 文本框注册键盘抬起事件,以及书写事件函数
- 事件函数中首先要获取去文本框内输入的内容
- 然后创建一个临时数组,存放对应的数据
- 把输入的字符和最开始定义的keyWords数组中的每一项数据做对比,那么就需要一个循环
- 如果输入的字符和数组中每一项数据的0位置上的字符能顾匹配上,那么就把它放入临时数组里
- 如果文本框内没有输入内容或者临时数组为空,那么就不创建div
- 如果用户输入的值和临时数组里面的数据相匹配,那么开始便利临时数组,创建div,然后把div加入box中
- 每次键盘抬起都判断有没有后面加的div,如果有那么就删除
代码如下:
<body> <div id="box"> <input type="text" value="" id="txt"> <input type="button" value="搜索" id="btn"> </div> <script> var keyWords = ['小样酸q糖', '小样我就这样', '小机灵鬼', '小仙女', '别---薛之谦', '别那么骄傲-----金海心', '许嵩----明智之举', '许仙白娘子', '小龙女杨过', '白羊', '白夜行']; var btn = document.getElementById('btn'); var txt = document.getElementById('txt'); //注册键盘抬起事件,并书写事件函数 txt.onkeyup = function () { //获取文本框输入的内容 var text = this.value; //创建一个临时数组,存放对应的数据; var tempArr = []; //把输入的字符串和keyWord数组中的数据的每一项作对比 for (var i = 0; i < keyWords.length; i++) { //如果输入的字符和数组中是0位置出现的能匹配上,就把数据放入临时数组里 if (keyWords[i].indexOf(text) === 0) { tempArr.push(keyWords[i]);//把数据追加到最后 } } //临时数组已经存在 var box = document.getElementById('box'); var dv = document.getElementById('dv'); //每次键盘抬起都判断有没有dv这个div if (dv) { //如果有就删除一次 box.removeChild(dv); } //如果文本框是空的或者临时数组是空的,不用创建div if (this.value.length === 0 || tempArr.length === 0) { // 判断页面中是否有div,有则删除 if (dv) { box.removeChild(dv); } return; } //如果文本框内的值和临时数组内的内容相匹配,那么开始遍历临时数组,创建div,然后把div加入到box中 var divObj = document.createElement('div'); box.appendChild(divObj); divObj.id = 'dv'; divObj.style.width = '500px'; divObj.style.border = '1px solid green'; for (var i = 0; i < tempArr.length; i++) { var pObj = document.createElement('p'); divObj.appendChild(pObj); pObj.innerText = tempArr[i]; pObj.style.margin = '0'; pObj.style.padding = '0'; pObj.style.marginLeft = '5px'; pObj.style.marginTop = '5px'; pObj.style.cursor = 'pointer'; pObj.onmouseover = function () { this.style.backgroundColor = '#def'; } pObj.onmouseout = function () { this.style.backgroundColor = ''; } } } </script> </body>
来源:https://www.cnblogs.com/1020-jj/p/11040259.html