类似百度搜索 input 输入实时查询

最新推荐文章于 2021-03-24 16:10:07 发布

marethanblue

最新推荐文章于 2021-03-24 16:10:07 发布

阅读量483

点赞数

文章标签：实时搜索

本文链接：https://blog.csdn.net/weixin_40704960/article/details/102482161

版权

类似百度搜索 input 输入实时查询显示

function aa(){

        var supplyName = $("#aa option:selected").text();
        $('#engineerName11').off('keyup').on('keyup', function (event) {

            /* 根据aa 查询姓名*/
            $.ajax({
                type: "get",
                // async: false,
                dataType: "json",
                data:{"vendorName":supplyName},
                contentType: "application/json",
                url: root + "/om/xx/selectVendorPersonInfoByVendorName",
                success: function (datas) {
                    $("#ProjectNumberSearch").html("");   // 初始搜索框为空
                    var code = $("#engineerName11").val();    // 获取输入框中的值
                    if (code == "") {                      // 如果为空，隐藏搜索框
                        $("#ProjectNumberSearch").css("display", "none");
                        return;
                    } else {
                        for (var i = 0; i < datas.length; i++) {
                            var ss=datas[i].personName;
                            var reg = RegExp(code);
                            if (reg.test(ss)) {     // 如果匹配到，显示搜索框和内容
                                    $("#ProjectNumberSearch").css("display", "block");
                                    $("#ProjectNumberSearch").append("<p  style=' margin-left: 10px;'>" + ss + "</p>");
                                }
                        }
                        writeSystemCode();
                    }
                    if ($("#ProjectNumberSearch").html() == "") {    // 如果搜索框为空，隐藏
                        $("#ProjectNumberSearch").css("display", "none");
                    }

                }
            });
        });
    }
    // 当点击的时候，将内容写入表单，隐藏框
    function writeSystemCode()
    {
        $('#ProjectNumberSearch').find('p').each(function(index, item) {
            $(this).die('click').live('click', function () {
                $("#engineerName11").val(this.innerText);
                $("#ProjectNumberSearch").css("display", "none");
                $("#ProjectNumberSearch").html("");
            })
        });

    }

页面

.contain__border__search {
        display: none;
        position: absolute;
        z-index: 9;
        max-height: 200px;
        overflow: auto;
        border: 1px solid #ccc;
        background: #fff;
        width: 57.5%;
        border-top: none;
        box-shadow: 0 0 1px #ccc;
    }
    .contain__border__search p {
        font-size: 14px;
        height: 20px;
        line-height: 20px;
    }
    .contain__border__search p:hover {
        background: rgba(245, 239, 242, 1);
    }

 <input type="text" name="engineerName1" id="engineerName11" class="form-control"/>
 <div class="contain__border__search" id="ProjectNumberSearch"> </div>