Skip to content

Commit a067154

Browse files
Sight-wcgSight-wcg
committed
feat: 搜索菜单添加键盘事件处理
fix: 修复搜索菜单在侧边菜单折叠时不能跳转指定菜单的问题 fix: 修复搜索菜单连续搜索时因对数据源修改,造成搜索结果不全的问题
1 parent a1602be commit a067154

File tree

2 files changed

+118
-78
lines changed

2 files changed

+118
-78
lines changed

‎admin/css/admin.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -531,7 +531,7 @@ body,
531531
padding: 0px 10px;
532532
color: currentColor;
533533
font-size: 14px;
534-
border-radius: 2px;
534+
border-radius: 4px;
535535
box-shadow: 0 1px 3px #d4d9e1;
536536
cursor: pointer;
537537
background-color: #fff;

‎component/pear/module/admin.js

Lines changed: 117 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -462,6 +462,67 @@ layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'm
462462
});
463463

464464
body.on("click", ".menuSearch", function () {
465+
// 过滤菜单
466+
var filterHandle = function (filterData, val) {
467+
if (!val) return [];
468+
var filteredMenus = [];
469+
filterData = $.extend(true, {}, filterData);
470+
$.each(filterData, function (index, item) {
471+
if (item.children && item.children.length) {
472+
var children = filterHandle(item.children, val)
473+
var obj = $.extend({}, item, { children: children });
474+
if (children && children.length) {
475+
filteredMenus.push(obj);
476+
} else if (item.title.indexOf(val) >= 0) {
477+
item.children = []; // 父级匹配但子级不匹配,就去除子级
478+
filteredMenus.push($.extend({}, item));
479+
}
480+
} else if (item.title.indexOf(val) >= 0) {
481+
filteredMenus.push(item);
482+
}
483+
})
484+
return filteredMenus;
485+
}
486+
487+
// 树转路径
488+
var tiledHandle = function (data) {
489+
var tiledMenus = [];
490+
var treeTiled = function (data, content) {
491+
var path = "";
492+
var separator = " / ";
493+
// 上级路径
494+
if (!content) content = "";
495+
$.each(data, function (index, item) {
496+
if (item.children && item.children.length) {
497+
path += content + item.title + separator;
498+
var childPath = treeTiled(item.children, path);
499+
path += childPath;
500+
if (!childPath) path = ""; // 重置路径
501+
} else {
502+
path += content + item.title
503+
tiledMenus.push({ path: path, info: item });
504+
path = ""; //重置路径
505+
}
506+
})
507+
return path;
508+
};
509+
treeTiled(data);
510+
511+
return tiledMenus;
512+
}
513+
514+
// 创建搜索列表
515+
var createList = function (data) {
516+
var _listHtml = '';
517+
$.each(data, function (index, item) {
518+
_listHtml += '<li smenu-id=' + item.info.id + ' smenu-url=' + item.info.href + ' smenu-title=' + item.info.title + '>';
519+
_listHtml += ' <span><i style="margin-right:10px" class=" ' + item.info.icon + '"></i>' + item.path + '</span>';
520+
_listHtml += ' <i class="layui-icon layui-icon-right"></i>';
521+
_listHtml += '</li>'
522+
})
523+
return _listHtml;
524+
}
525+
465526
var _html = [
466527
'<div class="menu-search-content">',
467528
' <div class="layui-form menu-search-input-wrapper">',
@@ -495,98 +556,77 @@ layui.define(['message', 'table', 'jquery', 'element', 'yaml', 'form', 'tab', 'm
495556
var $noData = $(".menu-search-no-data");
496557
var $list = $(".menu-search-list");
497558
var menuData = sideMenu.option.data;
498-
var tiledMenus = [];
499-
// 过滤菜单
500-
var filterHandle = function (filterData, val) {
501-
if(!val)return [];
502-
var filteredMenus = [];
503-
$.each(filterData, function (index,item) {
504-
if (item.children && item.children.length) {
505-
var children = filterHandle(item.children, val)
506-
var obj = $.extend({}, item, { children: children});
507-
if (children && children.length) {
508-
filteredMenus.push(obj);
509-
} else if (item.title.indexOf(val) >= 0){
510-
item.children = [];
511-
filteredMenus.push($.extend({}, item));
512-
}
513-
} else if (item.title.indexOf(val) >= 0){
514-
filteredMenus.push(item);
515-
}
516-
})
517-
return filteredMenus;
518-
}
519-
520-
// 树转路径
521-
var tiledHandle = function(data, content){
522-
var path = "";
523-
var separator = " / ";
524-
if(!content)content = "";
525-
$.each(data, function(index, item){
526-
if(item.children && item.children.length){
527-
path += content + item.title + separator;
528-
var childPath = tiledHandle(item.children, path);
529-
path += childPath;
530-
if (!childPath) path = ""; // 重置路径
531-
}else{
532-
path += content + item.title
533-
tiledMenus.push({
534-
path:path,
535-
info:item
536-
});
537-
path = ""; //重置路径
538-
}
539-
})
540-
return path;
541-
}
542-
543-
var createList = function(data){
544-
var _listHtml = '';
545-
$.each(data, function(index, item){
546-
var path = item.path;
547-
var id = item.info.id;
548-
var icon = item.info.icon;
549-
var url = item.info.href;
550-
var title = item.info.title;
551-
552-
_listHtml += '<li smenu-id=' + id + ' smenu-url='+ url + ' smenu-title='+ title +'>';
553-
_listHtml += '<span><i style="margin-right:10px" class=" ' + icon + '"></i>' + path +'</span>';
554-
_listHtml += '<i class="layui-icon layui-icon-right"></i>';
555-
_listHtml += '</li>'
556-
})
557-
return _listHtml;
558-
}
559+
559560

560-
$input.focus();
561561
$layer.css("border-radius", "6px");
562-
$list.on("click", "li", function(){
563-
var menuId = $(this).attr("smenu-id");
564-
sideMenu.selectItem(menuId);
565-
layer.close(layeridx);
566-
})
567-
$input.off("input").on("input",debounce(function(){
562+
$input.off("focus").focus();
563+
// 搜索菜单
564+
$input.off("input").on("input", debounce(function(){
568565
var keywords = $input.val().trim();
569566
var filteredMenus = filterHandle(menuData, keywords);
570567

571568
if(filteredMenus.length){
572-
$noData.css("display","none");
573-
tiledMenus = [];
574-
tiledHandle(filteredMenus);
569+
var tiledMenus = tiledHandle(filteredMenus);
575570
var listHtml = createList(tiledMenus);
576-
$list.html("").append(listHtml).children(":first").addClass("this").hover(function(){
577-
$(this).addClass("this");
578-
},function(){
579-
$(this).removeClass("this");
580-
});
571+
$noData.css("display", "none");
572+
$list.html("").append(listHtml).children(":first").addClass("this")
581573
}else{
582574
$list.html("");
583575
$noData.css("display", "flex");
584576
}
585577
var currentHeight = $(".menu-search-content").outerHeight()
586578
$layer.css("height", currentHeight);
587579
$content.css("height", currentHeight);
588-
},500)
580+
}, 500)
589581
)
582+
// 搜索列表点击事件
583+
$list.off("click").on("click", "li", function () {
584+
var menuId = $(this).attr("smenu-id");
585+
if(sideMenu.isCollapse){
586+
collapse();
587+
}
588+
sideMenu.selectItem(menuId);
589+
layer.close(layeridx);
590+
})
591+
592+
$list.off('mouseenter').on("mouseenter", "li", function () {
593+
$(".menu-search-list li.this").removeClass("this");
594+
$(this).addClass("this");
595+
}).off("mouseleave").on("mouseleave", "li", function(){
596+
$(this).removeClass("this");
597+
})
598+
599+
// 监听键盘事件
600+
// Enter:13 Spacebar:32 UpArrow:38 DownArrow:40
601+
$(document).off("keydown").keydown(function (e) {
602+
if (e.keyCode === 13 || e.keyCode === 32) {
603+
e.preventDefault();
604+
var menuId = $(".menu-search-list li.this").attr("smenu-id");
605+
if (sideMenu.isCollapse) {
606+
collapse();
607+
}
608+
sideMenu.selectItem(menuId);
609+
layer.close(layeridx);
610+
}else if(e.keyCode === 38){
611+
e.preventDefault();
612+
var prevEl = $(".menu-search-list li.this").prev();
613+
$(".menu-search-list li.this").removeClass("this");
614+
if(prevEl.length !== 0){
615+
prevEl.addClass("this");
616+
}else{
617+
$list.children().last().addClass("this");
618+
}
619+
}else if(e.keyCode === 40){
620+
e.preventDefault();
621+
var nextEl = $(".menu-search-list li.this").next();
622+
$(".menu-search-list li.this").removeClass("this");
623+
if(nextEl.length !== 0){
624+
nextEl.addClass("this");
625+
}else{
626+
$list.children().first().addClass("this");
627+
}
628+
}
629+
})
590630
}
591631
})
592632
});

0 commit comments

Comments
 (0)