Press "Enter" to skip to content

简单记录一下今天碰到一个小问题的解决思路

前言

今天接到一个需求,类似 Google 搜索根据关键字自动联想功能,如下图所示

首先说一下我的实现思路
1. 监听搜索框的值改变事件,获取关键字,请求数据接口,显示结果列表面板
2. 监听搜索结果列表点击事件,获取当前值,同时隐藏结果列表面板
3. 监听搜索框失去焦点事件,隐藏结果列表面板(这一步主要是考虑到用户可能会没有点击结果列表,直接搜索)

问题描述

在实现第 3 步的时候遇到了一个问题,当我的点击搜索结果列表的时候搜索框的值并没有发生变化。
review 了一遍代码发现,是因为点击搜索结果列表的时候,先触发了搜索框失去焦点事件,所以结果面板先被隐藏了,所以我在点击的时候其实并没有点击到,也就不会触发结果列表点击事件。
下面贴一下问题代码(因为是公司内部项目,所以这段代码是我为了模拟写的测试代码)
html 结构

<style type="text/css">
    ul,li{
        list-style: none;
        margin: 0 0;
        padding: 0 0;
    }
    .search-block{
        position: absolute;
        border-radius: 0 2px 2px 0;
        border: 1px solid #c3c3c3;
        min-width: 171px;
        background-color: #ffffff;
        z-index: 999;
        display: none;
    }
    .search-block:hover{
        z-index: 1000;
    }
    .search-block li:hover{
        background-color: #c3c3c3;
    }
</style>
搜索:<input name="keyword" placeholder="请输入关键字" />
<div class="search-block">
    <ul>
        <li>测试11111111111111</li>
        <li>测试22222222222222</li>
        <li>测试33333333333333</li>
    </ul>
</div>

JS 代码

<script type="text/javascript">
// 搜索框值发生改变事件
$("input[name=keyword]").on('input', function(){
    $('.search-block').css('left', $(this).offset().left);
    $('.search-block').css('top', $(this).offset().top + 20);
    $('.search-block').show();
});
// 搜索框失去焦点隐藏搜索结果
$("input[name=keyword]").on('blur', function(){
    $('.search-block').hide();  
})
// 点击搜索结果条触发事件
$(".search-block li").on('click', function(){
    var val = $(this).text();
    console.log(val);
    $('input[name=keyword]').val(val);
    $('.search-block').hide();
})
</script>

问题演示

解决思路

既然问题出在搜索框失去焦点的时候,那么判断搜索框失去焦点的时候当前鼠标所在的位置不就好啦,只有鼠标不在搜索结果面板的时候才隐藏。
最开始想到的实现方案是先获取结果面板的区域,然后再拿到鼠标位置的坐标,判断是否在结果区域内,但是这种方法实现起来太过复杂,不利于后期阅读和维护。所以暂时放弃了
于是我想到了第二种方法,使用鼠标移入选择器 :hover, 设置搜索结果面板鼠标移入的样式,css 新增以下代码

.search-block:hover{
    z-index: 1000;
}

同时在搜索框失去焦点事件里判断 z-index 不等于 1000 时才隐藏结果面板

// 输入框失去焦点隐藏搜索结果
$("input[name=keyword]").on('blur', function(){
    if($('.search-block').css('z-index') != 1000){ // 新增判断
        $('.search-block').hide();  
    }
})

这个时候就是正常的效果了

大佬们有更好的解决办法欢迎指教o( ̄▽ ̄)ブ

发表评论

邮箱地址不会被公开。 必填项已用*标注