类似google提示窗口

来源：互联网发布：张容铭javascript下载编辑：程序博客网时间：2024/04/28 13:43

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