jQuery实现input聚焦时显示列表失焦时隐藏列表

做网站时搜索框有个历史记录，想要点击input输入框聚焦式下拉显示历史记录列表，点击其他地方时隐藏历史记录列表。如何实现呢？这里可以通过jQuery的聚焦和失焦函数来实现，具体请看下面的代码：

<!--引入jQuery库-->
<script src="js/jquery-1.10.2.js"></script>

<!--HTML代码 简化版 具体样式根据自己的需要写-->
<input class="" id="ssk" >
<button id="search">搜索</button>

<div id="ssls">
     <ul>
     <li>记录1</li>
     <li>记录2</li>
     <li>记录3</li>
     </ul>
</div>

<!--js代码-->
<script>
$("#ssk").focus(function(){
  $("#ssls").css("display","block");
});
$("#ssk").blur(function(){
  $("#ssls").css("display","none");
});
</script>

通过上面的代码就可以实现如下效果了：

如果你也需要相似的效果，就试试看吧。