注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

天上人间*bobo之家

有阳光的时段,就有他(她)的博客文章。也许天气并非晴空万里,博主的“博物钟”却是

 
 
 

日志

 
 

仿baidu自动提示文本框  

2009-09-23 10:39:47|  分类: 仿百度提示 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<script language="javascript">
var intIndex=0;arrList = new Array();
function dearray(aa)//定义array
{
    //document.write(aa);
    arrList = aa.split(',');
    intIndex = arrList.length;
}
function test() {
    init();
    dearray("asp,csdn,aaaa,bbbbc,afd,werwe,adfs,ertr,qwq,qwqwq,trt,uyus,dsfs,uere,add,234,2,1dr4,ae4564,adf4645,afa3543,sdfse5,ae345345,sdf4564,34346536");
    smanPromptList(arrList,"aspx");
    dearray("1sdfsdf.com,a11sdafs.net,b22dsafsdf,c333asdfsadf,4444dsafasdf,dddsfddsafdsaf,121213dsafsdaf,43213asdfadsf,dsa3121dasf3,a213,323313,3213,32213,dsfsdddd,ds11dfsfd,ffdafd,afdfd,afd,baffad,2fda2fd,dasd");
    smanPromptList(arrList,"aspx2");
    smanPromptList(arrList,"inputer")
}
function init() {
if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}
    arrList.sort( function(a, b) {
    if(a.length>b.length)return 1;
    else if(a.length==b.length)return a.localeCompare(b);
    else return -1;
        }
    );
}
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(evt){
    evt = evt || window.event;
                var ie = (document.all)? true:false
                if (ie){
                    var keyCode=evt.keyCode
                    if (keyCode==40||keyCode==38){ //下上
                        var isUp=false
                        if(keyCode==40) isUp=true ;
                        chageSelection(isUp)
                    }else if (keyCode==13){//回车
                        outSelection(selectedIndex);
                    }else{
                        checkAndShow(evt)
                    }
                }else{
                    checkAndShow(evt)
                }
                divPosition(evt)
            }
            function checkAndShow(evt){
                        var strInput = objInput.value
                        if (strInput!=""){
                            divPosition(evt);
                            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(evt){
                var left = 0;
            var top = 0;
var e = objInput;
            while (e.offsetParent){
            left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
           top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);
          e     = e.offsetParent;
           }
          left += e.offsetLeft + (e.currentStyle?(parseInt(e.currentStyle.borderLeftWidth)).NaN0():0);
          top += e.offsetTop + (e.currentStyle?(parseInt(e.currentStyle.borderTopWidth)).NaN0():0);

                objouter.style.top    = (top + objInput.clientHeight) + 'px' ;
                objouter.style.left    = left + 'px' ;
                objouter.style.width= objInput.clientWidth;
            }
    }
    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>");
    function getAbsoluteHeight(ob){
        return ob.offsetHeight
    }
    function getAbsoluteWidth(ob){
        return ob.offsetWidth
    }
    function getAbsoluteLeft(ob){
        var mendingLeft = ob .offsetLeft;
        while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
            mendingLeft += ob .offsetParent.offsetLeft;
            mendingOb = ob.offsetParent;
        }
        return mendingLeft ;
    }
    function getAbsoluteTop(ob){
        var mendingTop = ob.offsetTop;
        while( ob != null && ob.offsetParent != null && ob.offsetParent.tagName != "BODY" ){
            mendingTop += ob .offsetParent.offsetTop;
            ob = ob .offsetParent;
        }
        return mendingTop ;
    }
Number.prototype.NaN0 = function()
{
    return isNaN(this)?0:this;
}
</script>
<body onLoad="test()">
下拉提示跟着 MOuse 走的。。想把他改成在文本框下出来的那种怎么改
<input type="text" id="aspx"><br/>
<input type="text" id="aspx2">
<table width="970" border="0" align="center">
<tr>
    <td><table width="100%" border="0" align="center">
      <tr>
        <td align="center" valign="middle"> </td>
      </tr>
    </table>
        <table border="1" align="center"
cellspacing="1" bordercolor="#9CD7FF" id="table1" style="BORDER-COLLAPSE: collapse" >
          <tr bgcolor="#99CCFF">
            <td bgcolor="#CEE3FF"><font class="text">日期</font></td>
            <td bgcolor="#FFFFFF"><input type="text" id="inputer"></td>
          </tr>
          <tr bgcolor="#99CCFF">
            <td bgcolor="#CEE3FF"><font class="text">制造号码</font></td>
            <td bgcolor="#FFFFFF"></td>
          </tr>
          <tr bgcolor="#99CCFF">
            <td height="24" bgcolor="#CEE3FF"><font class="text">作业内容</font></td>
            <td height="24" bgcolor="#FFFFFF"> </td>
          </tr>
        </table>
      <br /></td>
</tr>
</table>
</body></html>

  评论这张
 
阅读(737)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018