Search drop-down box solution_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 12:08:59

Original

1000 people have browsed it

<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" /></a></div>        	</div><div class="search_ifo"><div style="border-bottom: 1px solid #ccc;">    <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>

Copy after login

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

回复讨论(解决方案)

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

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

google　一个这个：autocomplete　就知道了

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

New Document

Autocomplete Function

Power By Miracle, never-online

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