搜索栏交互

js部分：

$(document).on('click', null, function (event) {
    if ($(event.target)[0].className !== 'jump-link') {
        if ($(event.target)[0].className === 'input-enter') {
            $('.swiper-mask').show();
            $('.search-list-mask').show();
        } else {
            $('.swiper-mask').hide();
            $('.search-list-mask').hide();
        }
    }
});

html机构

<div class="input-wrap">
    <div class="input-left">
        <i class="icon-top-angle"></i>
        <input class="input-enter" type="text" placeholder="请输入小区名称/商圈/地铁站">
        <div class="search-list-mask">
            <!-- <p class="search-list-tit"><i class="icon-fire"></i>热门搜索</p> -->
            <p class="search-list-tit">历史记录 <i class="icon-delete"></i> </p>
            <!-- <p class="search-list-tit">您有可能在搜</p> -->


            <div class="search-list-word">
                <span class="label red">区域</span>
                <p class="msg"><span class="bold">江汉区</span></p>
                <span class="num">1378套</span>
                <a class="jump-link" href="https://www.baidu.com/"></a>
            </div>
            <div class="search-list-word">
                <span class="label green">商圈</span>
                <p class="msg"><span class="bold">中南</span>路</p>
                <span class="num">98套</span>
                <a class="jump-link"></a>
            </div>
            <div class="search-list-word">
                <span class="label blue">区域</span>
                <p class="msg"><span class="bold">中南</span>医院（在建）
                </p>
                <span class="num">1378套</span>
                <a class="jump-link"></a>

            </div>
            <div class="search-list-word">
                <span class="label gray">区域</span>
                <p class="msg"><span class="bold">中南</span>医院（在建）
                </p>
                <span class="num">1378套</span>
                <a class="jump-link"></a>

            </div>
            <div class="search-list-word">
                <span class="label gray">区域</span>
                <p class="msg"><span class="bold">中南</span>医院（在建）
                </p>
                <span class="num">1378套</span>
                <a class="jump-link"></a>

            </div>
            <div class="search-list-word">
                <span class="label gray">区域</span>
                <p class="msg"><span class="bold">中南</span>医院（在建）
                </p>
                <span class="num">1378套</span>
                <a class="jump-link"></a>

            </div>
            <div class="search-list-word">
                <span class="label gray">区域</span>
                <p class="msg"><span class="bold">中南</span>医院（在建）
                </p>
                <span class="num">1378套</span>
                <a class="jump-link"></a>

            </div>
            <div class="search-list-word">
                <span class="label gray">区域</span>
                <p class="msg"><span class="bold">中南</span>医院（在建）
                </p>
                <span class="num">1378套</span>
                <a class="jump-link"></a>

            </div>
        </div>
    </div>

    <a class="input-right" href="javascript:;">开始找房</a>
</div>

css样式

.input-wrap {
    margin-top: 18px;
    position: relative;
    padding-right: 117px;
    .input-left {
        position: relative;
        display: inline-block;
        padding: 16px 0 16px 11px;
        width: 100%;
        height: 50px;
        background: #fff;
        border-radius: 2px 0 0 2px;
        .input-enter {
            display: inline-block;
            width: 100%;
            height: 20px;
            line-height: 20px;
            font-size: 16px;
            color: #C4C4C4;
            .placeholder( {
                color: #C4C4C4;
            }
            );
        }

    }

    .input-right {
        position: absolute;
        top: 0;
        right: 0;
        display: inline-block;
        width: 117px;
        height: 50px;
        background: #00CB65;
        border-radius: 0 2px 2px 0;
        color: #fff;
        line-height: 50px;
        font-size: 16px;
        text-align: center;
    }
}
.search-list-mask {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    padding-bottom: 10px;
    width: 100%;
    background: #fff;
    box-shadow: 0px 8px 20px 0px rgba(176, 176, 176, 0.4);
    border-radius: 2px;

    .search-list-tit {
        position: relative;
        padding-left: 12px;
        height: 40px;
        line-height: 40px;
        background: #F6F7FA;
        font-size: 14px;
        color: #969BA8;

        .icon-fire {
            position: relative;
            bottom: -4px;
            margin-right: 4px;
        }

        .icon-delete {
            position: absolute;
            top: 11px;
            right: 18px;
            cursor: pointer;
        }
    }

    .search-list-word {
        position: relative;
        padding: 0 12px;
        height: 40px;
        line-height: 42px;
        font-size: 16px;
        font-weight: 400;
        color: #333;
        cursor: pointer;
        &:hover {
            background: #F1F3F4;
        }
        .jump-link{
            display: inline-block;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 2;
        }
        .label {
            position: relative;
            top: -1px;
            padding: 0 10px;
            margin-right: 5px;
            width: 44px;
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            border-radius: 10px;

            &.red {
                color: #FF6E54;
                background: #fff0ee;
                border: 1px solid #FF6E54;
            }

            &.green {
                color: #00CB65;
                background: #e5faef;
                border: 1px solid #00CB65;
            }

            &.blue {
                color: #61B8FF;
                background: #eff8ff;
                border: 1px solid #61B8FF;
            }

            &.gray {
                color: #B3B8C6;
                background: #f7f8f9;
                border: 1px solid #B3B8C6;
            }
        }

        .msg {
            display: inline-block;

            .bold {
                font-weight: bold;
            }
        }

        .num {
            position: absolute;
            right: 12px;
            font-size: 14px;
            color: #999;
        }
    }
}