<!
DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
>
< 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 >
< 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 >