jq实现自定义搜索框聚焦展开，失焦收起

1.html

<div class="search-bar">
   <input id="searchInput" type="text" placeholder="搜索您想要查询的项目" />
   <div class="search-drop-menu">
      <div class="select-list">
      <a href="javascript:;" class="option">琶洲站</a>
      <a href="javascript:;" class="option">琶洲站供电系统</a>
      <a href="javascript:;" class="option">琶洲站供电系统</a>
      <a href="javascript:;" class="option">琶洲站供电系统</a>
      <a href="javascript:;" class="option">琶洲站供电系统</a>
      <a href="javascript:;" class="option">琶洲站供电系统</a>
      <a href="javascript:;" class="option">琶洲站概要设计批复</a>
      <a href="javascript:;" class="option">琶洲站供电系统</a>
      </div>
   </div>
</div>

2.css

.search-drop-menu{position:absolute;top:43px;left:0;right:0;z-index:9;text-align:left;border-radius:8px;padding:10px 0 0;border:1px solid #DEE1E2;overflow:hidden;box-shadow:0 2px 2px 0 rgba(0,0,0,0.1);background-color:#fff;background-color:rgba(255,255,255,0.95);display:none;}
.search-drop-menu>.select-list>.option{display:block;line-height:30px;padding:0 20px 0 50px;color:#000;}
.search-drop-menu>.select-list>.option:hover{text-decoration:none;background-color:#ddd;}

3.js

$('#searchInput').focus(function () {  //聚焦展开
    $(this).next().slideDown();
});
$('#searchInput').blur(function () {  //失去焦点收起
    $(this).next().slideUp();
});

附图：