<!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>
chwech