基于JQ的搜索选项和文本框的下拉选择特效

实用jQuery搜索框选项下拉选择特效，实现原理很简单：当鼠标放到箭头的时候显示隐藏的DIV层，
然后就可以选择选项，至于选项的值，则采用在li 标签上加了value属性，这样就可以对应选项的
值，在选中的时候则把选项的值传递给隐藏hidden控件，这样就达到了搜索的功能，赶紧试下吧。

调用方法：
1.搜索框位置
   搜索框的位置可以根据CSS进行绝对地位，修改top,right的值就可以

.search {float: left;font-size: 14px;border: 1px solid #CCC;position: absolute;top:30px;right:300px;}

2.函数调用

<script type="text/javascript">$(function(){$("#header-search").hover(function(){$("#search-sort-list").show();},function(){$("#search-sort-list").hide();});//搜索选项选择$("#search-sort-list li").click(function(){var curTxt = $(this).text();var type = $(this).val();$('#search').val(type);$(this).addClass("current").siblings().removeClass("current");$(this).parent().siblings(".search-sort-txt").text(curTxt);if(type==181)//这里是调整文字显示的宽度{$(".search-sort-txt").css("width","46px");}else if(type==190){$(".search-sort-txt").css("width","35px");}else{$(".search-sort-txt").css("width","30px");}$(this).parent().hide();});});</script>