Jie

心若无尘,一花一世界,一鸟一天堂;心若静,已如涅磐,风声物语,皆可成言.
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

搜索框中输入文本自动提示候选项代码（像google那样的）

Posted on 2008-05-18 18:24  JieNet  阅读(609)  评论(0)    收藏  举报

摘自电脑报2008年第18期 F11（91版）

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    
<script type="text/javascript" language="javascript">

    var intIndex=0;arrList = new Array();

    function test() 
    {
        dearray("1111,222,222a,aaa,aa1,bb,b222,b3,323313,3213,32213,dsfsdddd");
        smanPromptList(arrList,"inputer1");
        smanPromptList(arrList,"inputer2");
        smanPromptList(arrList,"inputer3")
    }
       
    function dearray(aa)//定义array
    {
        arrList = aa.split(',');
        
    }
    function getAbsoluteWidth(ob)
    {
            return ob.offsetWidth
    }

    function smanPromptList(arrList,objInputId){
            var objouter=document.getElementById("__smanDisp") //显示的DIV对象
            var objInput = document.getElementById(objInputId); //文本框对象
            var selectedIndex=-1;
            var intTmp; //循环用的:)
            if (objInput==null) {alert('smanPromptList初始化失败:没有找到"'+objInputId+'"文本框');return ;}
                //文本框失去焦点
                objInput.onblur=function(){
                    objouter.style.display='none';
                }
                //文本框按键抬起
                objInput.onkeyup=checkKeyCode;
                //文本框得到焦点
                objInput.onfocus=checkAndShow;
                
                function checkKeyCode(){
                    var ie = (document.all)? true:false
                    if (ie){
                        var keyCode=event.keyCode
                        if (keyCode==40||keyCode==38){ //下上
                            var isUp=false
                            if(keyCode==40) isUp=true ;
                            chageSelection(isUp)
                        }else if (keyCode==13){//回车
                            outSelection(selectedIndex);
                        }else{
                            checkAndShow()
                        }
                    }else{
                        checkAndShow()
                    }
                    divPosition()
                }
                
                function checkAndShow(){
                            var strInput = objInput.value
                            if (strInput!=""){
                                divPosition();
                                selectedIndex=-1;
                                objouter.innerHTML ="";
                                for (intTmp=0;intTmp<arrList.length;intTmp++){
                                    if (arrList[intTmp].substr(0, strInput.length)==strInput){
                                        addOption(arrList[intTmp]);
                                    }
                                }
                                objouter.style.display='';
                            }else{
                                objouter.style.display='none';
                        }
                        function addOption(value){
                            objouter.innerHTML +="<div onmouseover=\"this.className='sman_selectedStyle'\" onmouseout=\"this.className=''\" onmousedown=\"document.getElementById('"+objInputId+"').value='" + value + "'\">" + value + "</div>"    
                        }
                }
                
                function chageSelection(isUp){
                    if (objouter.style.display=='none'){
                        objouter.style.display='';
                    }else{
                        if (isUp)
                            selectedIndex++
                        else
                            selectedIndex--
                    }
                    var maxIndex = objouter.children.length-1;
                    if (selectedIndex<0){selectedIndex=0}
                    if (selectedIndex>maxIndex) {selectedIndex=maxIndex}
                    for (intTmp=0;intTmp<=maxIndex;intTmp++){
                        if (intTmp==selectedIndex){
                            objouter.children[intTmp].className="sman_selectedStyle";
                        }else{
                            objouter.children[intTmp].className="";
                        }
                    }
                }
                
                function outSelection(Index){
                    objInput.value = objouter.children[Index].innerText;
                    objouter.style.display='none';
                }
                
                function divPosition(){
                    var clx,cly;
                    clx=event.clientX;
                    cly = event.clientY;
                    objouter.style.top    = cly+10;
                    objouter.style.left    = clx+20; 
                    objouter.style.width= getAbsoluteWidth(objInput)
                }
    }
    
    document.write("<div id='__smanDisp' style='position:absolute;display:none;background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;' onbulr> </div>");
    document.write("<style>.sman_selectedStyle{background-Color:#102681;color:#FFFFFF}</style>");

</script>
    
</head>



<body onload="test()">
    <form id="form1" runat="server">
    <div>
        
         <table border="1" align="center" cellspacing="1" id="table1" style="BORDER-COLLAPSE: collapse"  >
              <tr bgcolor="#99CCFF">
                <td bgcolor="#CEE3FF">查询1</td>
                <td bgcolor="#FFFFFF"><input type="text" id="inputer1" /></td>
              </tr>
              <tr bgcolor="#99CCFF">
                <td bgcolor="#CEE3FF">查询2</td>
                <td bgcolor="#FFFFFF"><input type="text" id="inputer2" /></td>
              </tr>
              <tr bgcolor="#99CCFF">
                <td height="24" bgcolor="#CEE3FF">查询3</td>
                <td height="24" bgcolor="#FFFFFF"><input type="text" id="inputer3" /></td>
              </tr>
        </table>
    
    </div>
    </form>
</body>
</html>