jquery特效代码:文本框搜索选项下拉选择效果

发布时间:2019-09-07编辑:脚本学堂
一个jquery实现文本框搜索选项下拉选择的特效代码,jquery文本框获得与失去焦点的例子,供大家学习参考。

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>