<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<script language="JavaScript">
var autolist = ["asdasdf","aasd","aidanofiuads","asdfasdf","argsgsr","taeta"];
function JSearcher(elementId,count){
var g;
var rect;
var currentRow=-1;
var Num = count;
g = document.getElementById(elementId);
rect = g.getBoundingClientRect();
/*初始化工作*/
/*創建容器*/
var oo = document.createElement("div");
oo.style.left = rect.left;
oo.style.top = rect.top+20;
//oo.style.backgroundColor = "#FF0000";
oo.style.position = "absolute";
oo.style.border = "1px solid black";
oo.style.width=rect.right-rect.left;
oo.style.display="none";
/*創建結果表格*/
rtTable = document.createElement("table");
rtTable.cellpadding = 0;
rtTable.cellspacing = 0;
rtTable.border = 0;
rtTable.style.width = rect.right-rect.left;
for(var i=0;i<count;i++){
rtTR = rtTable.insertRow(rtTable.rows.length);
rtTR.style.width = rect.right-rect.left;
rtTD = rtTR.insertCell(0);
rtTD.innerText="";
rtTR.style.width = rect.right-rect.left;
rtTD.onmouseover = function(){
var row = window.event.srcElement.parentElement.rowIndex;
selRow(row);
currentRow = row;
}
rtTD.onmouseout = function(){
this.bgColor ="";
}
rtTD.onclick = function(){
oo.style.display = "none";
}
}
g.onkeyup = function(){
switch(event.keyCode){
case 38://up
currentRow = currentRow-- > 0 ? currentRow : 0;
selRow(currentRow);
break;
case 40://down
currentRow = currentRow++ < (Num-1) ? currentRow:(Num-1);
selRow(currentRow);
break;
case 13:
show(false);
break;
default:
update();
show(true);
}
}
oo.appendChild(rtTable);
document.body.appendChild(oo);
/*設定選中的項目高亮顯示*/
this.selRow = function(index){
for(i=0;i<Num;i++){
tdt = rtTable.rows(i).cells(0);
if(i==index){
tdt.bgColor ="#00FF00";
g.value = tdt.innerText;
}else{
tdt.bgColor="";
}
}
}
/*更新搜索結果*/
this.update = function(){
for(i=0;i<count;i++){
rtTable.rows(i).style.display="none";
}
Num = autolist.length < count ? autolist.length : count;
for(i=0;i<Num;i++){
tdt = rtTable.rows(i).style.display="";
tdt = rtTable.rows(i).cells(0);
tdt.innerText = autolist[i];
}
}
/* 顯示層*/
this.show = function(flag){
if(flag){
oo.style.display = "";
}else{
oo.style.display = "none";
}
}
document.body.onclick = function(){
show(false);
}
}
</script>
</head>
<body onLoad="JSearcher('gg',10);">
關鍵字:<input type="text" name="gg" id="gg" >
</body>
</html>