input 输入框 焦点事件

以下内容实现输入框获取焦点，失去焦点事件。如图：

失去焦点：

获取焦点：

代码如下：

一、HTML代码

<div id="inputId">
    <input type="text" name="search" id="search"/>
    <div class="search">
        <ul>
            <li>
                <a href="javascript:;">破局</a>
            </li>
            <li>
                <a href="javascript:;">追风</a>
            </li>
            <li>
                <a href="javascript:;">看云</a>
            </li>
        </ul>
    </div>
</div>

二、CSS代码

*{
    box-sizing:border-box;
    margin:0;
    padding:0;
    font-family: 'Microsoft Yahei', Arial, sans-serif;
}
li{
    list-style:none;
}
a{
    text-decoration: none;
}
/*主体样式*/
#inputId{
    width:200px;
    height:150px;
    margin:1em 0.5em 0.5em 1.5em;
    border:1px solid #ddd;
    border-radius:10px;
    box-shadow: 0 2px 2px rgba(10,20,50,.6);
}
#search{
    width:150px;
    height:30px;
    margin:1em 0.5em 0.5em 1.5em;
    padding-left:10px;
    border:1px solid #ddd;
    border-radius:10px;
    outline: none;
    box-shadow: 0 2px 2px rgba(10,20,50,.6);
    position:relative;
}
.search{
    display:none;
    position:absolute;
    top:48px;
    left:20px;
    width:150px;
    height:100px;
    margin:1em 0.5em 0.5em 1.5em;
    padding-left:10px;
    border:1px solid #ddd;
    border-radius:10px;
}

三、JS代码

$(document).ready(function(){
    /*获取焦点显示*/
   $('[id=search]').focus(function(){
       $('[class=search]').css('display','block');
   });
    /*失去焦点隐藏*/
    $('[id=search]').blur(function(){
        $('[class=search]').css('display','none');
    });
});