基于jq搜素框，包含前端模糊查询，提示，点击选择等功能

上图

上代码

html（不推荐这样写行内css，在此为了方便复制过来，看起来更直观）

<div class="layui-nav-item clearfix" style="padding: 0 4px;width:200px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top: 20px;" id="box">
        <input type="text" style="width: 70%;float: left;margin-left: 5px;display: none;height:28px;" name="title" i18n-placeholder="请输入搜索条件" autocomplete="off" class="layui-input" id="mainSearchInpt">
        <button type="button" class="layui-btn" style="width: 51px;padding: 0;float: left;height:28px;line-height: 28px;" id="mainSearchBtn" ew-event="search"><i class="layui-icon layui-icon-search"></i></button> 
</div>
复制代码

js，重点 仅提供思路，完全复制是可能会出错的，因为里面 业务逻辑 不一定适合你的项目（很简单，很容易剥离出你需要的部分） 不查询后端，仅获取菜单数据，筛选数据，然后带该数据为参数，触发点击事件，打开对应菜单页面（因为是菜单搜索功能）

// 判断当前侧栏是否展开     我的业务逻辑，你或许不需要这个部分
            let a = $('.layui-layout-admin').hasClass('admin-nav-mini')
            console.log(a)
            if (a == true) {
                console.log(true)
                $('#mainSearchInpt').hide()
            } else {
                console.log(false)
                $('#mainSearchInpt').show()
            }
            
            /*根据id获取元素对象*/
            function my$(id) {
                return document.getElementById(id);
            }

            /**
             * 设置任意元素的中间文本内容
             * @param {*} element 标签元素
             * @param {*} text    文本内容
             */
            function setInnerText(element, text) {
                if (typeof element.textContent === "undefined") {
                    element.innerText = text;
                } else {
                    element.textContent = text;
                }
            }
            // 递归查找，这是我接口返回的数据格式，你可以根据你的数据配置下面的代码
            var allItem = []
            function find(arr) {
                if (arr == null) { return null };
                arr.forEach(function (item, index, arr) {
                    if (item.search && !item.nav) {
                        allItem.push(item.search);
                    } else {
                        find(item.nav);
                    }
                })
                return allItem;
            }
            var keywords;

            $.ajax({
                url: '/xxxxxxxx/xxxx/xxx',         //获取数据的接口
                data: {},
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    let alldata = res.data;
                    let obj = find(alldata);
                    keywords = obj;
                }
            });

            var tempArr = []; //临时数组
            var isMask = false;//是否已存在遮盖层
            $(document).on("keyup", "#mainSearchInpt", function () {
                var text = this.value.trim();
                // 判断是否存在下拉框，存在删除，
                if (my$("dv")) {
                    my$("box").removeChild(my$("dv"));
                } else {
                    // Do-nothing
                }

                // 临时数组初始化，处理临时数组数据
                tempArr = [];
                for (let i = 0; i < keywords.length; i++) {
                    if ((keywords[i].indexOf(text) !== -1) && (0 != text.length)) {
                        tempArr.push(keywords[i]);
                    }
                }

                // 文本框是空的，临时数组也是空的，不用创建div
                if (this.value.length == 0 || tempArr.length == 0) {
                    // 如果页面中又这个div，删除这个div
                    if (my$("dv")) {
                        my$("box").removeChild(my$("dv"));
                    }
                    return;
                }

                // 创建div,把div加入到id="box"的标签中
                var dvObj = document.createElement("div");
                my$("box").appendChild(dvObj);
                dvObj.id = "dv";
                dvObj.style.width = "350px";
                dvObj.style.border = "1px solid green";
                dvObj.style = `position:fixed;background-color:#fff;top:98px;left:9px;width:190px;z-index:9999;max-height:200px;overflow:scroll;`
                // 遍历tempArr数组，创建p，添加到dvObj里面
                for (let i = 0; i < tempArr.length; i++) {
                    var pObj = document.createElement("p");
                    // pObj.innerHTML = tempArr[i];
                    // 在p标签内部添加文本文字
                    setInnerText(pObj, tempArr[i]);
                    dvObj.appendChild(pObj);

                    // 注册鼠标进入事件，鼠标进入，添加背景色
                    pObj.onmouseover = function () {
                        this.style.backgroundColor = "#E9EDF0";
                    };

                    // 注册鼠标移除事件，鼠标移除，移除背景色
                    pObj.onmouseout = function () {
                        this.style.backgroundColor = "";
                    };

                    // 注册鼠标点击事件  出于特殊业务逻辑考虑 我没有用click，当然你可以用click
                    pObj.onmousedown = function () {
                        $('#mainSearchInpt').val(tempArr[i])
                        $('#mainSearchBtn').click()
                        if (my$("dv")) {
                            my$("box").removeChild(my$("dv"));
                        }
                        if (my$("mask")) {
                            my$("box").removeChild(my$("mask"));
                        }
                        $('#mainSearchInpt').val('')
                        isMask = false
                    };
                }
                
                //遮盖层   透明   用于点击其他地方关闭搜索框的下拉选择列表
                if (isMask = false) {
                    var mask = document.createElement("div");
                    mask.style = `position:fixed;width:100%;height:100%;z-index:8888;`;
                    mask.id = 'mask';
                    mask.onmousedown = function () {
                        if (my$("dv")) {
                            my$("box").removeChild(my$("dv"));
                        }
                        if (my$("mask")) {
                            my$("box").removeChild(my$("mask"));
                        }
                    };
                    my$("box").appendChild(mask)
                    isMask = true;
                }
            })
复制代码

半个小时写出来的，功能上或有欠缺，还需要完善一下，这个看自己的业务逻辑的需要了。

有想了解更多的小伙伴可以加Q群链接里面看一下，希望能够对你们有所帮助。