搜索功能：搜索文本框焦点和弹出分类菜单效果(附源码)

工做了搜索文本框和弹出分类菜单效果，但效果太不尽人意了，里面bug很多，对修改后的代码附出来：

<div>
<div>
<input id=”keyword” type=”text” name=”key-title”  />
<div >
<span >选择分类</span>
<ul  >
<li><a href=”http://www.sweiku.com”>物品交易</a></li>
<li><a href=”http://www.sweiku.com”>车辆买卖</a></li>
<li><a href=”http://www.sweiku.com”>房屋租售</a></li>
<li><a href=”http://www.sweiku.com”>全职招聘</a></li>
<li><a href=”http://www.sweiku.com”>兼职招聘</a></li>
<li><a href=”http://www.sweiku.com”>求职简历</a></li>
<li><a href=”http://www.sweiku.com”>交友活动</a></li>
<li><a href=”http://www.sweiku.com”>宠物</a></li>
<li><a href=”http://www.sweiku.com”>生活服务</a></li>
<!–<li><a   href=”#”>团购</a></li>
<li><a  href=”http://www.sweiku.com”>旅游酒店</a></li>–>
<li><a href=”http://www.sweiku.com”>教育培训</a></li>
</ul>
</div>
<script type=”text/javascript”>
$(document).ready(function ()
{

//焦点效果
var keywordTip=”你找谁？输入类别名或者关键词试试”;
$(‘#keyword’).val(keywordTip);
$(‘#keyword’).focus(function(){
var kValue=$(‘#keyword’).val();
if(kValue==keywordTip)
$(‘#keyword’).val(“”);
}).blur(function(){
var kValue=$(‘#keyword’).val();
if(kValue==”")
$(‘#keyword’).val(keywordTip);
});

//弹出菜单效果
$(‘.click-box’).hide();
$(‘.cateselect’).hover(function ()   //选择菜单层
{
$(‘.click-box’).toggle();    //显示菜单层
});

})
;
$(‘.click-box’).bind(“onmouseout”,function(){$(‘.click-box’).hide();});   //移除菜单层 菜单层隐藏
</script>
<div>
<input type=”button” value=” ” />
</div>
</div>

效果图：

总结几句是：

搜索框焦点的效果：聚焦变无，失焦还原；用户输入搜索值，聚焦不变，失焦不变；值为空还原

弹出菜单：鼠标移到“选择菜单层”弹出“菜单层”，鼠标离开”菜单层“，”菜单层“隐藏。引号部分是不同的层

源码下载：http://www.sweiku.com/focus-text-box-and-popup-categories-menu-effects.html

口明明口 出品