电脑安全

您当前的位置:主页 > 电脑安全 >

ajax仿google搜索下拉提示-网络编程

来源:[db:来源]标题:   元素    编辑:电脑技术全能网 时间:2019-09-18 18:01

原标题:ajax仿google搜索下拉提示-网络编程
   <scripttype="text/javascript"src="prototype.js"></script><scripttype="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="white"break;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="green"break;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(xmlhttp.responseText);if(result!=''){varresultstring=newStringBuffer();vartitle=result.split('$')[0];varhits=result.split('$')[1];for(vari=0;i<title.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;j<title.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=do&keyword="+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>

上一篇:php生成xml 类-网络编程

下一篇:没有了