最近在学习jquery，自己写了一个下拉框的搜素功能，比较简单，在IE8，FireFox，chrome浏览器中都没问题。

代码

<html>
 <head>
<style type="text/css">
<!--
.searchshowres {
  position:absolute;
  width:199px;
  height:100px;
  z-index:1;
  border-top-width: 1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
  border-left-width: 1px;
  border-top-style: outset;
  border-right-style: outset;
  border-bottom-style: outset;
  border-left-style: outset;
}



body,td,th {
  font-size: 9pt;
}
-->
</style>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<SCRIPT language="JavaScript">

$(function(){
     $(".searchtxt").bind("keyup", function(){
        var $stxt = $(this);
        var value = $stxt.val();
        var otxt = '';
        //遍历select的option的文本中包含输入的文本内容的option集合
        $stxt.next(".searchsel").children("option:contains('"+value+"')").each(function(){
            otxt += "<span class='searchresval' code='"+$(this).attr("value")+"' style='width:147;cursor:hand' >"+$(this).text()+"</span><br>";
        });
        //在select框下展现搜索的结果
                $stxt.prev(".searchshowres").show()
                           .children(".searchres").empty().append(otxt)
                            .children('.searchresval').bind("mouseover", function(){//鼠标移到移出索索结果上的一个颜色变化
                               $(this).css("background", "#cccccc");
                            }).bind("mouseout", function(){
                               $(this).css("background", "#ffffff");
                            }).bind("click", function(){
                               $stxt.val($(this).text());
                               $stxt.prev(".searchshowres").hide();
                               $stxt.next(".searchsel").children("option[value='"+$(this).attr("code")+"']").attr("selected", true);
                                                                                                                                          
                            });
                                                                                                              
       
     });

     $(".searchSel").bind("change", function(){
        $(this).prev(".searchtxt").val($(this).find("option:selected").text());
     });
});
</script>
 </head>
<body>

<div class="searchshowres" style="display:none;left:9px;top:37px;">
    <div class="searchres"></div>
</div>
<input class="searchtxt" style="width:200px;POSITION: absolute" >
  <select class="searchsel" style="width:217px;CLIP: rect(auto auto auto 200px); POSITION: absolute">
  <option value="" selected></option>
  <option value="我们">我们</option>
  <option value="张一">张一</option>
  <option value="张二">张二</option>
   <option value="张四">张四</option>
  <option value="李二">李二</option>
   <option value="爱在西元">爱在西元</option>
   <option value="在爱西元">在爱西元</option>
   <option value="西元">西元</option>
   <option value="快发现">快发现</option>
   <option value="在问">在问</option>
   <option value="在问2">在问2</option>
   <option value="在问3">在问3</option>
   <option value="在使用">在使用</option>
   <option value="微软">微软</option>
   <option value="拼音输入法">拼音输入法</option>
   <option value="部分">部分</option>
   <option value="笔输入">笔输入</option>
   <option value="每次">每次</option>
   <option value="每次有">每次有</option>
   <option value="按下">按下</option>
   <option value="都会触">都会触</option>
   <option value="事件">事件</option>
   <option value="事件啊">事件啊</option>
  </select>

<p style="height:150px"> </p>

<div class="searchshowres" style="display:none;left:9px;top:193px;">
    <div class="searchres"></div>
</div>
<input class="searchtxt" style="width:200px;POSITION: absolute" >
  <select class="searchsel" style="width:217px;CLIP: rect(auto auto auto 200px); POSITION: absolute">
  <option value="" selected></option>
  <option value="我们">我们</option>
  <option value="张一">张一</option>
  <option value="张二">张二</option>
   <option value="张四">张四</option>
  <option value="李二">李二</option>
   <option value="爱在西元">爱在西元</option>
   <option value="在爱西元">在爱西元</option>
   <option value="西元">西元</option>
   <option value="快发现">快发现</option>
   <option value="在问">在问</option>
   <option value="在问2">在问2</option>
   <option value="在问3">在问3</option>
   <option value="在使用">在使用</option>
   <option value="微软">微软</option>
   <option value="拼音输入法">拼音输入法</option>
   <option value="部分">部分</option>
   <option value="笔输入">笔输入</option>
   <option value="每次">每次</option>
   <option value="每次有">每次有</option>
   <option value="按下">按下</option>
   <option value="都会触">都会触</option>
   <option value="事件">事件</option>
   <option value="事件啊">事件啊</option>
  </select>

</body>
</html>

 

如下：