基于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;
				}
			})