recherche

Maison >interface Web >tutoriel HTML >搜索下拉框求解_html/css_WEB-ITnose

搜索下拉框求解_html/css_WEB-ITnose

WBOY
WBOYoriginal
2016-06-24 12:08:59994parcourir

<head>    <title>无标题页</title>    <style type="text/css">    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}    body,input,button,select,textarea{font-size:14px;font-family:Tahoma,Geneva,Verdana;outline:none;}    body{margin:0;padding:0; font-size:12px; background-color:#f3f3f3}    .clear{clear:both;}    a{text-decoration:none;}    a:hover{text-decoration:none ;}    img{border:0}    ol,ul{list-style:none;}    div{ margin:0}  /*搜索区*/.search_background{ height:21px; width:150px; background-color:#ffffff; float:left;border:0; color:#cacacc;margin:5px 0 0 5px;display:inline}.search_background .input_text{ float:left}.search_background .input_text input{ width:124px; height:20px; font-size:12px; line-height:20px;padding:0 3px 0 3px;  border:0;}.search_background .search_button{ float:right;  display:inline}.search_background .search_button a{ margin:3px 3px 0 0 }  /*搜索下拉*/.search_ifo{width:149px;border: 1px solid #999;  background-color:#fff;margin-top:30px;margin-left:-150px;float:left}.search_public{background:url(../images/short_dotted_line.png) repeat-x; height:25px;line-height:25px; text-indent:1em;}.search_public:hover{background-color:#e1e1e1;cursor:pointer;}.search_tip{height:30px;line-height:30px;color:#0098E1}.search_tip:hover{background-color:#e1e1e1;cursor:pointer;}      </style></head><body><div>   <div class="search_background">                   	<div class="input_text"><input type="text" /></div>            	<div class="search_button"><a href="#"> <img  src="images/individual-headerandfooter/search.png" / alt="搜索下拉框求解_html/css_WEB-ITnose" ></a></div>        	</div><div class="search_ifo"><div   style="max-width:90%">    <div class="search_tip"> 搜“<span style="color:Red;">白</span>”相关信息&raquo;</div>    <div  class="search_public" ><span style="color:Red;">白</span>啊</div>     <div  class="search_public"><span style="color:Red;">白</span>啊</div>    </div>         </div>         </div></body>


就是想在输入框输入字符后，下拉框显示相应的信息，比如说输入 白下拉框显示搜 白相关信息、再在下面显示相关白的信息列表


回复讨论(解决方案)

这是有个插件的，我前段时间还帮别人搞了个，只是里面有些修改的，是别人做的。

例子：http://s.dingso.com/ds.jsp?q1=设计玩具&q2=&q3_1=&q3_2=&q3_3=&q4=&Sortt=2&Periodd=3&startat=0

google　一个这个：autocomplete　就知道了

就是发ajax返回结果集后操作页面显示

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">


 New Document 





<script> <br /> <!-- <br /> <br /> // script by blueDestiny <br /> // email : blueDestiny [at] 126 . com <br /> <br /> // Object: jsAuto <br /> // browser: ie, mf. <br /> // example: <br /> <br /> // step1 : <br /> // create autocomplete container, return object and bind event to the object, and <br /> ///create a new jsAuto instance: <br /> // <div id="divautocomplete"> <br /> // var autocomplete = new jsAuto("autocomplete","divautocomplete") <br /> // handle event: <br /> // autocomplete.handleEvent(value, returnObjectID) <br /> // <input id="rautocomplete" onkeyup="autocomplete.handleEvent(this.value,"ratocomplete",event)> <br /> <br /> // step2 : <br /> // add autocompete item: <br /> // autocomplete.item(string) <br /> // string must be a string var, you can split the string by "," <br /> // autocomplete.item("blueDestiny,never-online,csdn,blueidea") <br /> <br /> // http://www.never-online.com <br /> <br /> function jsAuto(instanceName,objID) <br /> { <br /> this._msg = []; <br /> this._x = null; <br /> this._o = document.getElementById( objID ); <br /> if (!this._o) return; <br /> this._f = null; <br /> this._i = instanceName; <br /> this._r = null; <br /> this._c = 0; <br /> this._s = false; <br /> this._v = null; <br /> this._o.style.visibility = "hidden"; <br /> this._o.style.position = "absolute"; <br /> this._o.style.zIndex = "9999"; <br /> this._o.style.overflow = "auto"; <br /> this._o.style.height = "50"; <br /> return this; <br /> }; <br /> <br /> jsAuto.prototype.directionKey=function() { with (this) <br /> { <br /> var e = _e.keyCode ? _e.keyCode : _e.which; <br /> var l = _o.childNodes.length; <br /> (_c>l-1 || _c<0) ? _s=false : ""; <br /> <br /> if( e==40 && _s ) <br /> { <br /> _o.childNodes[_c].className="mouseout"; <br /> (_c >= l-1) ? _c=0 : _c ++; <br /> _o.childNodes[_c].className="mouseover"; <br /> } <br /> if( e==38 && _s ) <br /> { <br /> _o.childNodes[_c].className="mouseout"; <br /> _c--<=0 ? _c = _o.childNodes.length-1 : ""; <br /> _o.childNodes[_c].className="mouseover"; <br /> } <br /> if( e==13 ) <br /> { <br /> if(_o.childNodes[_c] && _o.style.visibility=="visible") <br /> { <br /> _r.value = _x[_c]; <br /> _o.style.visibility = "hidden"; <br /> } <br /> } <br /> if( !_s ) <br /> { <br /> _c = 0; <br /> _o.childNodes[_c].className="mouseover"; <br /> _s = true; <br /> } <br /> }}; <br /> <br /> // mouseEvent. <br /> jsAuto.prototype.domouseover=function(obj) { with (this) <br /> { <br /> _o.childNodes[_c].className = "mouseout"; <br /> _c = 0; <br /> obj.tagName=="DIV" ? obj.className="mouseover" : obj.parentElement.className="mouseover"; <br /> }}; <br /> jsAuto.prototype.domouseout=function(obj) <br /> { <br /> obj.tagName=="DIV" ? obj.className="mouseout" : obj.parentElement.className="mouseout"; <br /> }; <br /> jsAuto.prototype.doclick=function(msg) { with (this) <br /> { <br /> if(_r) <br /> { <br /> _r.value = msg; <br /> _o.style.visibility = "hidden"; <br /> } <br /> else <br /> { <br /> alert("javascript autocomplete ERROR :\n\n can not get return object."); <br /> return; <br /> } <br /> }}; <br /> <br /> // object method; <br /> jsAuto.prototype.item=function(msg) <br /> { <br /> if( msg.indexOf(",")>0 ) <br /> { <br /> var arrMsg=msg.split(","); <br /> for(var i=0; i<arrMsg.length; i++) <br /> { <br /> arrMsg[i] ? this._msg.push(arrMsg[i]) : ""; <br /> } <br /> } <br /> else <br /> { <br /> this._msg.push(msg); <br /> } <br /> this._msg.sort(); <br /> }; <br /> jsAuto.prototype.append=function(msg) { with (this) <br /> { <br /> _i ? "" : _i = eval(_i); <br /> _x.push(msg); <br /> var div = document.createElement("DIV"); <br /> <br /> //bind event to object. <br /> div.onmouseover = function(){_i.domouseover(this)}; <br /> div.onmouseout = function(){_i.domouseout(this)}; <br /> div.onclick = function(){_i.doclick(msg)}; <br /> var re = new RegExp("(" + _v + ")","i"); <br /> div.style.lineHeight="140%"; <br /> div.className = "mouseout"; <br /> if (_v) div.innerHTML = msg.replace(re , "<strong>$1"); <br /> div.style.fontFamily = "verdana"; <br /> <br /> _o.appendChild(div); <br /> }}; <br /> jsAuto.prototype.display=function() { with(this) <br /> { <br /> if(_f&&_v!="") <br /> { <br /> _o.style.left = _r.offsetLeft; <br /> _o.style.width = _r.offsetWidth; <br /> _o.style.top = _r.offsetTop + _r.offsetHeight; <br /> _o.style.visibility = "visible"; <br /> } <br /> else <br /> { <br /> _o.style.visibility="hidden"; <br /> } <br /> }}; <br /> jsAuto.prototype.handleEvent=function(fValue,fID,event) { with (this) <br /> { <br /> var re; <br /> _e = event; <br /> var e = _e.keyCode ? _e.keyCode : _e.which; <br /> _x = []; <br /> _f = false; <br /> _r = document.getElementById( fID ); <br /> _v = fValue; <br /> _i = eval(_i); <br /> re = new RegExp("^" + fValue + "", "i"); <br /> _o.innerHTML=""; <br /> <br /> for(var i=0; i<_msg.length; i++) <br /> { <br /> if(re.test(_msg[i])) <br /> { <br /> _i.append(_msg[i]); <br /> _f = true; <br /> } <br /> } <br /> <br /> _i ? _i.display() : alert("can not get instance"); <br /> <br /> if(_f) <br /> { <br /> if((e==38 || e==40 || e==13)) <br /> { <br /> _i.directionKey(); <br /> } <br /> else <br /> { <br /> _c=0; <br /> _o.childNodes[_c].className = "mouseover"; <br /> _s=true; <br /> } <br /> } <br /> }}; <br /> window.onerror=new Function("return true;"); <br /> //--> <br /> </script>






Autocomplete Function






Power By Miracle, never-online


<script> <br /> <!-- <br /> var jsAutoInstance = new jsAuto("jsAutoInstance","divc"); <br /> 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,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,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,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,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,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,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,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,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,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,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,z-start"); <br /> jsAutoInstance.item("blueDestiny"); <br /> jsAutoInstance.item("BlueMiracle,Blue"); <br /> jsAutoInstance.item("angela,geniuslau"); <br /> jsAutoInstance.item("never-online"); <br /> //--> <br /> </script>


谢谢大家了，希望有人可以根据我提供的信息编写一段，麻烦了！

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：html中怎么把图片按比例缩放在<span>里面_html/css_WEB-ITnoseArticle suivant：如何适应宽度 自动换行?_html/css_WEB-ITnose

Articles Liés

Voir plus