搜索下拉框求解？解决思路 _HTML/CSS

搜索下拉框求解？？

HTML code


<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">&nbsp;搜“<span style="color:Red;">白</span>”相关信息»</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返回结果集后操作页面显示
------解决方案--------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style>
body,div {
font-family:verdana;
line-height:100%;
font-size:9pt;
}
input {
width:300px;
}
h1 {
text-align:center;
font-size:2.2em;
}
#divf {
margin:10px;
font-size:0.8em;
text-align:center;
}
#divc {
border:1px solid #333333;
}
.des {
width:500px;
background-color:lightyellow;
border:1px solid #333;
padding:20px;