简单的ajax实现google suggest

sundful

浏览: 1253137 次
性别:
来自: 北京

最近访客更多访客>>

leovlys

ufostop

软件二叔

fkshl

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Ajax

Google Ajax IE .net HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="javascript">
var intIndex=0;arrList = new Array();
arrList[intIndex++] = "1sdfsdf.com";
arrList[intIndex++] = "a11sdafs.net";
arrList[intIndex++] = "b22dsafsdf";
arrList[intIndex++] = "c333asdfsadf";
arrList[intIndex++] = "4444dsafasdf";
arrList[intIndex++] = "我sfddsafdsaf";
arrList[intIndex++] = "121213dsafsdaf";
arrList[intIndex++] = "大43213asdfadsf";
arrList[intIndex++] = "大dsa3121dasf3";
arrList[intIndex++] = "大a213";
arrList[intIndex++] = "323313";
arrList[intIndex++] = "3213";
arrList[intIndex++] = "32213";
arrList[intIndex++] = "dsfsdddd";
arrList[intIndex++] = "ds11dfsfd";
arrList[intIndex++] = "ffdafd";
arrList[intIndex++] = "afdfd";
arrList[intIndex++] = "afd";
arrList[intIndex++] = "baffad";
arrList[intIndex++] = "2fda2fd";
arrList[intIndex++] = "dasd";

function smanPromptList(arrList,objInputId){
     this.style = "background:#E8F7EB;border: 1px solid #CCCCCC;font-size:14px;cursor: default;"
     if (arrList.constructor!=Array){alert('smanPromptList初始化失败:第一个参数非数组!');return ;}
     window.onload =function() {
                                  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;
                                 })
         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).toUpperCase()==strInput.toUpperCase()){
                                     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(){
                 objouter.style.top     =getAbsoluteHeight(objInput)+getAbsoluteTop(objInput);
                 objouter.style.left     =getAbsoluteLeft(objInput);
                 objouter.style.width=getAbsoluteWidth(objInput)
             }
     }
     document.write("<div id='__smanDisp' style='position:absolute;display:none;" + this.style + "' 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 ;
     }
}
smanPromptList(arrList,"inputer")
</script>

</HEAD>

<BODY>
<form action="" method="post">
<input type="text" id="inputer">
</form>
</BODY>
</HTML>

分享到：

spring2.5 | hibernate存取图片示例

2007-11-23 10:45
浏览 1914
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论