模糊搜索

最新推荐文章于 2021-08-04 11:51:23 发布

房东大爷

最新推荐文章于 2021-08-04 11:51:23 发布

阅读量190

点赞数

分类专栏：前端CSS JS JQ

本文链接：https://blog.csdn.net/qq284944970/article/details/82985246

版权

前端CSS JS JQ 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

#div_main {
    margin: 0 auto;
    width: 300px;
    height: 400px;
    border: 1px solid black;
    margin-top: 50px;
}

#div_txt {
    position: relative;
    width: 200px;
    margin: 0 auto;
    /*margin-top: 40px;*/
}

#txt1 {
    width: 99%;
}

#div_items {
    position: absolute;
    width: 100%;
    height: 200px;
    border: 1px solid #66afe9;
    border-top: 0px;
    overflow: auto;
    display: none;
    z-index: 100;
    background: black;
    color: white;

}

.div_item {
    width: 100%;
    height: 20px;
    margin-top: 1px;
    font-size: 13px;
    line-height: 20px;
}

<label for="works_sn" class="layui-form-label">
    <span class="x-red">*</span>生产款号
</label>
<div class="layui-input-inline" id="div_txt">
    <input type="text" id="works_sn" name="works_sn" required="" lay-verify="works_sn"
           autocomplete="off" class="layui-input">
    <div id="div_items">
    </div>
</div>

//弹出列表框
// $("#works_sn").click(function () {
//     $("#div_items").css('display', 'block');
//     return false;
// });

//隐藏列表框
$("body").click(function () {
    $("#div_items").css('display', 'none');
});
//移入移出效果
$(".div_item").hover(function () {
    $(this).css('background-color', '#1C86EE').css('color', 'white');
}, function () {
    $(this).css('background-color', 'white').css('color', 'black');
});

//文本框输入
$("#works_sn").keyup(function () {
    console.log($("#works_sn").val());
    $('.div_item').remove();
    $("#lining_phone").val('')
    $("#lining_address").val('')
    $("#download_address").val('')
    $("#lining_type").val('')
    $("#lining_name").val('')

    if ($("#works_sn").val().length <= 0) {
        $(".div_item").css('display', 'none');//如果填了，先将所有的选项隐藏
        return;
    } else {
        $("#div_items").css('display', 'block');
        // $(".div_item").css('display', 'block');//如果什么都没填，跳出，保持全部显示状态
        var works_sn = $("#works_sn").val();
        ajax_post({
            url: 'Work/worksSearch',
            data: {works_sn: works_sn},
            success: function (msg) {
                var html_s = '';
                for (var i = 0; i < msg.length; i++) {
                    html_s = html_s + '<div class="div_item" value=' + msg[i].works_id + '>' + msg[i].works_sn + '</div>'
                }
                $("#div_items").append(html_s);
                //项点击
                $(".div_item").click(function () {
                    $("#works_sn").val($(this).text());
                    var works_id = $(this).attr('value');
                    ajax_post({
                        url: 'Work/worksSearch',
                        data: {works_id: works_id},
                        success: function (msg) {
                            $("#lining_name").val(msg[0].lining_name)
                            $("#lining_phone").val(msg[0].lining_phone)
                            $("#lining_address").val(msg[0].lining_address)
                            $("#lining_type").val(msg[0].lining_type)
                            $("#download_address").val(msg[0].download_address)
                            $("#div_items").css('display', 'none');

                        },
                        error: function (msg) {
                            layer.msg(msg.error);
                        }
                    })
                });
            },
            error: function (msg) {
                layer.msg(msg.error);
            }
        })
    }
});