<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> <!--默认显示格式--> .into { background-color: #98FB98; color: #858687; } .inchange { background-color: #9ACD32; color: #000000; } <!--选中显示格式--> </style> </head> <body> <div> <div><input type="text" id="div_tex" /></div> <div id="result"></div> </div> </body></html><script> var arr = ['java', 'js', 'jq', 'SQL', 'MySQL']; var temp = []; //将 获取ID函数抽取出来 function $(id) { return document.getElementById(id); } // var div_texx = $('div_tex').value; //取文本框内容后 判断它是否数据库含有元素 如果是创建临时数组赋值 如果不为空执行遍历函数 function handler() { var div_tex = $('div_tex'); var div_texx = div_tex.value; if(div_tex.value != null && div_tex.value != "" && div_tex.value.length > 0) { create_temp(div_tex.value); if(temp != null && temp.length > 0) { show(tem); } else { cleanContent(); } } else { cleanContent(); } } //清空函数 function cleanContent() { var none = $('result'); if(none.firstChild != null) { none.removeChild(none.firstChild); cleanContent(); } } //创建临时数组 function create_temp(div_texx) { temp.length = 0; for(var i = 0; i <= arr.length; i++) { if(arr[i].indexOf(div_texx) != -1) { temp.push(arr[i]); } } } //智能索引菜单 show function show() { var result = $('result'); cleanContent(relut); for(var i = 0; i <= temp.length; i++) { var div = document.createElement("div"); div.innerHTML = temp[i]; div.className = "into"; //鼠标移动 div.onmousemove = function() { this.className = "inchange" } //鼠标选中 div.onmouseout = function() { this.className = "into" } //点击回车 div.onclick = function() { div_texx = this.innerHTML; cleanContent(); } result.appendChild(div); } } //键盘监控判断 window.onkeyup = function(event) { var result = $('result'); if(event.keyCode == "38") { var curr = document.getElementByClassName('inchange')[0]; if(curr == null) { result.lastChild.className = 'inchange'; return; } else if(curr.previousSibling != null) { curr.previousSibling.className = 'inchange'; curr.className = 'into'; } else { return; } } else if(event.keyCode == "40") { var curr = document.getElementByClassName('inchange')[0]; if(curr == null) { result.firstChild.className = 'inchange'; return; } else if(curr.nextSibling != null) { curr.nextSibling.className = 'inchange'; curr.className = 'into'; } else { return; } } else if(event.keyCode == "13") { var curr = document.getElementByClassName('inchange')[0]; $('div_tex').value = curr.innerHTML; cleanContent(); } else { handler(); } }</script>
添加回答
举报
0/150
提交
取消