上图
上代码
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群链接里面看一下，希望能够对你们有所帮助。
网友评论