ajax仿google搜索下拉提示

scripttype=text/javascriptsrc=prototype.js/scriptscripttype=text/javascript//定义变量lastindex表示为鼠标在查询结果上滑动所在位置,初始为-1varlastindex=-1;//定义变量flag表示是否根据用户输入的关键字进行ajax查询,flase为允许查询true为禁止查询varflag=false;//返回的查询结果生成的数组长度varlistlength=0;functionStringBuffer(){//定义对象StringBufferthis.data=[];//创建属性,自定字符串}StringBuffer.prototype.append=function(){//声明StringBuffer的方法this.data.push(arguments[0]);returnthis;//方法实现代码,赋值}StringBuffer.prototype.tostring=function(){//返回结果,或是说输出结果returnthis.data.join();}String.prototype.Trim=function(){//滤过空格returnthis.replace(/(^/s*)|(/s*$)/g,);}functionhiddensearch(){//隐藏函数主要是隐藏显示的提示下拉层和iframe,关于iframe下面在说其作用$(‘rlist’).style.display=none;$(‘rFrame’).style.display=none;}functionshowsearch(num){//显示函数主要是显示的提示下拉层和iframe参数num,根据该参数控制要显示提示层和iframe的高度$(‘rlist’).style.display=”;$(‘rFrame’).style.display=”;//这里我定义每个返回查询结果的提示高度为20px,其中提示层总高度又加了num,是因为我在定义样式时使用了padding一个像素$(‘rlist’).style.height=num*20+num+’px’;//同样定位iframe的高度$(‘rFrame’).style.height=num*20+num+’px’;}functiongetposition(element,offset){//返回文本输入框的坐标函数,参数element为要返回的对象,参数offset可选为offsetLeft|offsetTop分别表示为该对象距离左窗口上角的绝对位置//利用这个函数可以定位我们要显示的提示层位置,使提示层正确的显示在文本输入框下面varc=0;while(element){c+=element[offset];element=element.offsetParent}returnc;}/********************************DOM*************************************************/functioncreatelist(){//创建提示层varlistDiv=document.createElement(div);//createElement()方法可创建元素节点listDiv.id=rlist;//提示层idlistDiv.style.zIndex=2;//z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,这个设置的是后便listDiv.style.position=absolute;//position属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。这个和下边的那个是对应的,也就是说和下边的框架是对应的,位置设置为absolute的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过left、top、right以及bottom属性来规定。下边的出现也是因为选择了这个absolute数值listDiv.style.border=solid1px#000000;//设置边框样式listDiv.style.backgroundColor=#FFFFFF;//设置背景颜色listDiv.style.display=none;//此元素不会被显示listDiv.style.width=$(‘keyword’).clientWidth+px;//只读属性,声明了窗口的文档显示区的宽度listDiv.style.left=getposition($(‘keyword’),’offsetLeft’)+1.5+px;//设置定位元素左外边距listDiv.style.top=(getposition($(‘keyword’),’offsetTop’)+$(‘keyword’).clientHeight+3)+px;//设置一个定位元素的上外边距边界与其包含块上边界之间的偏移。提示:如果position属性的值为static,那么设置top属性不会产生任何效果。varlistFrame=document.createElement(iframe);listFrame.id=rFrame;//提示层idlistFrame.style.zIndex=1;//z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面,这个设置的是前边listFrame.style.position=absolute;//和上边的那个设置是对应的listFrame.style.border=0;//设置边框为0listFrame.style.display=none;//此元素不会被显示listFrame.style.width=$(‘keyword’).clientWidth+px;//只读属性,声明了窗口的文档显示区的宽度listFrame.style.left=getposition($(‘keyword’),’offsetLeft’)+1+px;//设置定位元素左外边距listFrame.style.top=(getposition($(‘keyword’),’offsetTop’)+$(‘keyword’).clientHeight+3)+px;//设置一个定位元素的上外边距边界与其包含块上边界之间的偏移。提示:如果position属性的值为static,那么设置top属性不会产生任何效果。document.body.appendChild(listDiv);//向节点的子节点列表的末尾添加新的子节点。开头结尾相呼应。document.body.appendChild(listFrame);//向节点的子节点列表的末尾添加新的子节点。开头结尾相呼应。}functionsetstyle(element,classname){switch(classname){case’m’:element.style.fontSize=12px;//设置字体大小element.style.fontFamily=arial,sans-serif;//fontFamily属性定义用于元素文本显示的字体。element.style.backgroundColor=#3366cc;//背景element.style.color=black;//颜色element.style.width=$(‘keyword’).clientWidth-2+px;//设置只读属性的宽element.style.height=20px;//设置高度element.style.padding=1px0px0px2px;//padding属性设置元素的内边距。if(element.displaySpan)element.displaySpan.style.color=whitebreak;case’d’:element.style.fontSize=12px;element.style.fontFamily=arial,sans-serif;element.style.backgroundColor=white;element.style.color=black;element.style.width=$(‘keyword’).clientWidth-2+px;element.style.height=20px;element.style.padding=1px0px0px2px;if(element.displaySpan)element.displaySpan.style.color=greenbreak;case’t’:element.style.width=80%;if(window.navigator.userAgent.toLowerCase().indexOf(firefox)!=-1)element.style.cssFloat=left;//判断头的elseelement.style.styleFloat=left;element.style.whiteSpace=nowrap;element.style.overflow=hidden;element.style.textOverflow=ellipsis;element.style.fontSize=12px;element.style.textAlign=left;break;case’h’:element.style.width=20%;if(window.navigator.userAgent.toLowerCase().indexOf(firefox)!=-1)element.style.cssFloat=right;elseelement.style.styleFloat=right;element.style.textAlign=right;element.style.color=green;break;}}functionfocusitem(index){if($(‘item’+lastindex)!=null)setstyle($(‘item’+lastindex),’d’);if($(‘item’+index)!=null){setstyle($(‘item’+index),’m’);lastindex=index;}else{$(keyword).focus();}}functionsearchclick(index){$(keyword).value=$(‘title’+index).innerHTML;flag=true;}functionsearchkeydown(e){if($(‘rlist’).innerHTML==”)return;varkeycode=(window.navigator.appName==MicrosoftInternetExplorer)?event.keyCode:e.which;//downif(keycode==40){if(lastindex==-1||lastindex==listlength-1){focusitem(0);searchclick(0);}else{focusitem(lastindex+1);searchclick(lastindex+1);}}if(keycode==38){if(lastindex==-1){focusitem(0);searchclick(0);}else{focusitem(lastindex-1);searchclick(lastindex-1);}}if(keycode==13){focusitem(lastindex);$(keyword).value=$(‘title’+lastindex).innerText;}if(keycode==46||keycode==8){flag=false;ajaxsearch($F(‘keyword’).substring(0,$F(‘keyword’).length-1).Trim());}}functionshowresult(xmlhttp){varresult=unescape(xml);if(result!=”){varresultstring=newStringBuffer();vartitle=result.split(‘$’)[0];varhits=result.split(‘$’)[1];for(vari=0;ititle.split(‘|’).length;i++){resultstring.append(‘divid=item’+i+”);resultstring.append(‘spanid=title’+i+”);resultstring.append(title.split(‘|’)[i]);resultstring.append(‘/span’);resultstring.append(‘spanid=hits’+i+”);resultstring.append(hits.split(‘|’)[i]澳门新葡亰手机版,);resultstring.append(‘/span’);resultstring.append(‘/div’);}$(‘rlist’).innerHTML=resultstring.tostring();for(varj=0;jtitle.split(‘|’).length;j++){setstyle($(‘item’+j),’d’);$(‘item’+j).displaySpan=$(‘hits’+j);setstyle($(‘title’+j),’t’);setstyle($(‘hits’+j),’h’);}showsearch(title.split(‘|’).length);listlength=title.split(‘|’).length;lastindex=-1;}elsehiddensearch();}functionajaxsearch(value){newAjax.Request(‘search.php’,{method:get,parameters:action=dokeyword=+escape(value),onComplete:showresult});}functionmain(){$(‘keyword’).className=$(‘keyword’).className==’inputblue’?’inputfocus’:’inputblue’;if($F(‘keyword’).Trim()==”)hiddensearch();else{if($F(‘keyword’)!=”flag==false)ajaxsearch($F(‘keyword’).Trim());if(listlength!=0)$(‘keyword’).onkeydown=searchkeydown;elsehiddensearch();}}functiononinit(){$(‘keyword’).autocomplete=off;$(‘keyword’).onfocus=main;$(‘keyword’).onkeyup=main;$(‘keyword’).onblur=hiddensearch;createlist();}Event.observe(window,’load’,oninit);/script