Pictured above,

In the code

HTML (not recommended for inline CSS, but more intuitive for copying)

<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="Please enter your search criteria" 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>
Copy the code

Js, mainly provide only train of thought, is completely copy may be wrong, because the inside business logic does not necessarily is suitable for your project (from what you need is very simple, easy to part) not query back-end, only obtain menu data, filter data, and then take the data as a parameter, triggers the click event, open the corresponding menu page (because is the menu search function)

// Determine if the current sidebar expands my business logic, you probably don't need this sectionlet a = $('.layui-layout-admin').hasClass('admin-nav-mini')
			console.log(a)
			if (a == true) {
				console.log(trueThe $()'#mainSearchInpt').hide()
			} else {
				console.log(falseThe $()'#mainSearchInpt').show()} /* Get the element object by id */function my$(id) {
				returndocument.getElementById(id); } /** * Sets the middle text content of any element * @param {*} element tag element * @param {*} text Text content */function setInnerText(element, text) {
				if (typeof element.textContent === "undefined") {
					element.innerText = text;
				} else{ element.textContent = text; Var allItem = [] 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;
					letobj = find(alldata); keywords = obj; }}); var tempArr = []; // Temporary array var isMask =false; $(document).on("keyup"."#mainSearchInpt".function() { var text = this.value.trim(); // Check whether there is a drop box, delete exists,if (my$("dv")) {
					my$("box").removeChild(my$("dv"));
				} else{// Do-nothing} // Do-nothing = [];for (let i = 0; i < keywords.length; i++) {
					if((keywords[i].indexOf(text) ! == -1) && (0! = text.length)) { tempArr.push(keywords[i]); }} // The text box is empty, and the temporary array is empty, so no div is createdif(this. Value. Length = = 0 | | tempArr) length = = 0) {/ / if the page and the div, delete the divif (my$("dv")) {
						my$("box").removeChild(my$("dv"));
					}
					return; } // create div and add div to 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; `// Walk through tempArr array, create p, add to dvObjfor (let i = 0; i < tempArr.length; i++) {
					var pObj = document.createElement("p"); // pObj.innerHTML = tempArr[i]; // Add text text inside the p tagsetInnerText(pObj, tempArr[i]); dvObj.appendChild(pObj); // Register mouse entry event, mouse entry, add background color pobj.onmouseOver =function () {
						this.style.backgroundColor = "#E9EDF0"; }; // Register mouse remove event, mouse remove, remove background color pobj.onmouseout =function () {
						this.style.backgroundColor = ""; }; For special business logic reasons I didn't use click, of course you can use 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}; } // Mask layer transparency is used to click elsewhere to close the search box's drop-down selection listif (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; }})Copy the code

Half an hour to write out, the function or lack of, but also need to improve, this depends on the needs of their business logic