仿百度输入框_第1页
仿百度输入框_第2页
仿百度输入框_第3页
仿百度输入框_第4页
仿百度输入框_第5页
已阅读5页，还剩6页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

本文实例讲解了基于javascript实现仿百度输入框自动匹配功能的详细代码，现在很多网站都有这种效果，在文本框输入一个字符，下边会出来相匹配的内容，这个代码就演示了这个功能是如何完成的，当然，这是个静态的，你可以将提示的内容从数据库读取出来，要用到AJAX那东东，分享给大家供大家参考，具体内容如下<HTML><HEAD><title>带输入匹配的文本框</title><style>body,div{font-family:verdana;line-height:100%;font-size:10pt;}input{width:320px;}h1{text-align:center;font-size:2.2em;}#divc{border:1pxsolid#555;.des{width:500px;background-color:lightyellow;border:1pxsolid#555;padding:25px;margin-top:25px;—color:#ffffff;background-color:highlight;width:100%;cursor:default;iseout,color:#000;width:100%;background-color:#ffffff;cursor:default;<SCRIPTLANGUAGE="JavaScript"><!--this._msg=[];this._x=null;this._o=document.getElementById(objID);if(!this._o)return;this._f=null;this._i=instanceName;this._r=null;this._c=0;this._s=false;this._v=null;this._o.style.visibility="hidden";this._o.style.position="absolute";this._o.style.zIndex="9999";this._o.style.overflow="auto";this._o.style.height="50";:fs;jsAtotype.directionKey=function(){with(this){vare=_e.keyCode?_e.keyCode:_e.which;varl=_o.childNodes.length;(_c>l-1||_c<0)?_s=false:"";if(e==40&&_s){_o.childNodes[_c].className="mouseout”;(_c>=l-1)?_c=0:_c++;_o.childNodes[_c].className="mouseover”;}if(e==38&&_s){_o.childNodes[_c].className="mouseout”;_c--<=0?_c=_o.childNodes.length-1:"";_o.childNodes[_c].className="mouseover”;}if(e==13){if(_o.childNodes[_c]&&_o.style.visibility=="visible"){_r.value=_x[_c];……if(!_s)c=0;………；_s=true;}}；//mouseEvent.………('"'s)_o.childNodes[_c].className="mouseout";c=0;：obj.parentElement.className="mouseover”;}};obj.tagName=="DIV”?obj.className="mouseout”:jsAtotype.doclick=function(msg){with(this)if(_r){r.value=msg;_o.style.visibility="hidden";elsealert("javascriptautocompleteERROR:\n\ncannotgetreturnobject.");}};//objectmethod;jsAtotype.item=function(msg){—{vararrMsg=msg.split(",”);for(vari=0;i<arrMsg.length;i++){arrMsg[i]?this._msg.push(arrMsg[i]):""}}elsethis.ms…)；this.msg.sort();…。en……L：…_x.push(msg);vardiv=document.createElement("DIV");//bindeventtoobject.div.onmouseover=function(){_i.domouseover(this)};div.onmouseout=function(){_i.domouseout(this)};div.onclick=function(){_i.doclick(msg)};varre=newRegExp("("+_v+")","i");div.style.lineHeight="140%";div.className="mouseout";if(_v)div.innerHTML=msg.replace(re,"<strong>$1</strong>");div.style.fontFamily="verdana";_o.appendChild(div);}};~~'顺ws)if(_f&&_v!="")5…；_o.style.width=_r.offsetWidth;_o.style.top=_r.offsetTop+_r.offsetHeight;_o.style.visibility="visible";else_o.style.visibility="hidden";:;jsAhandleEvent=function(fValue,fID,event){with(this)varre;e=event;vare=_e.keyCode:_e.keyCode・_e.which,_x=[]；_f=false;_r=document.getElementById(fID);_v=fValue;_i=eval(_i);re=newRegExp("A"+fValue+"","i");_o.innerHTML="";for(vari=0;i<_msg.length;i++)5(msg[i]))一_f=true;if(_f)if((e==38||e==40||e==13))…elsec=0;-0_„=_,_s=true;:;window.onerror=newFunction("returntrue;");//--></SCRIPT></HEAD><BODY><divid="divc"><!--thisistheautocompletecontainer.--></div><divalign="center"><inputonkeyup="jsAutoInstance.handleEvent(this.value,'auto',event)"id="auto"></div><SCRIPTLANGUAGE="JavaScript"><!--varjsAutoInstance=newjsAuto("jsAutoInstance","divc");jsAutoInstance.item("a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,j-start,k-start,l-start,m-start,n-start,o-start,p-start,q-start,r-start,s-start,t-start,u-start,v-start,w-start,x-start,y-start,z-start,u-start,v-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,s-start,w-start,x-start,y-start,z-start,z-start,a-start,b-start,c-start,d-start,e-start,f-start,g-start,h-start,i-start,a-start,b-start,c-start,d-start,e-start,z-start,z

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论