关于源生的搜索下拉框的实现，点击空白处隐藏下拉框如何实现

Question

关于源生的搜索下拉框的实现，点击空白处隐藏下拉框：

<div class="layui-form-select ySearchSelect">
                            <input type="text" name="" placeholder="输入关键字" class="layui-input">
                            <i class="layui-edge"></i>
                            <ul>
                                <li value="id0001">大白菜</li>
                                <li value="id0002">土豆</li>
                                <li value="id0003">西红柿</li>
                                <li value="id0004">黄瓜</li>
                                <li value="id0005">黄花菜</li>
                                <li value="id0006">恍惚</li>
                                <li value="id0007">恍惚是</li>
                            </ul>
                        </div>

/*带搜索的下拉框 - 开始*/
.ySearchSelect{
    height: 32px;
    position: relative;
    z-index: 1;
}
.ySearchSelect i.select{
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -moz--transform: rotate(180deg);
    transform: rotate(180deg); 
    margin-top: -8px;
}
.ySearchSelect ul{
    display: none;
    width: 100%;
    height: 228px;
    position: relative;
    top: 10px;
    z-index: 2;
    background-color: #fff;
    border: 1px solid #d2d2d2;
    padding: 5px 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ySearchSelect ul li{
    width: 100%;
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ySearchSelect ul li:hover{
    background-color: #f0f0f0;
}
/*带搜索的下拉框 - 结束*/

$(function(){
    
        
    $(document).click(function(){
        console.log(2)
        $(".ySearchSelect ul").hide();
    });
    
    $(".ySearchSelect input").focus(function(){
            console.log(1)
        $(this).siblings("i").addClass("select");
        $(this).siblings("ul").show();
        
        //选项点击事件
        $(this).siblings("ul").find("li").click(function(){
            $(this).parent().hide();
            $(this).parent().siblings("i").removeClass("select");
            $(this).parent().siblings("input").val($(this).text());
            var id = $(this).attr("value");
        });
        
        $(this).siblings("div").click(function(){
            console.log(2)
            $(".ySearchSelect ul").hide();
        });
    });
    
})

我的逻辑似乎有问题，我希望光标进入显示下拉框，点击空白才出发隐藏，不知道该如何实现，在线等待，请高手给个思路。

Answer 1

首先 $(".ySearchSelect input") 触发 focus 是靠点击，不是你说的 光标进入，光标进入的事件可以用 mouseenter

其次 点击 输入框的时候，由于点击事件的冒泡，会触发 document 注册的点击事件，所以下拉框显示然后立马隐藏；
可以给 输入框的点击事件 阻止冒泡

$(".ySearchSelect input").on('click',function (e) {
  e.stopPropagation();
})