需求实现的效果图:
imedical/web/scripts/websys.frames.js
新增红色框的代码:
代码文本:
$("#searchBox").on('keypress',function(ev){
if(ev.keyCode==13){
ev.stopPropagation();
ev.preventDefault()
searchHandle();
}
})
$("#searchBtn").on('click', function(){
searchHandle();
});
然后,下面的代码复制到文件的最后面,添加保存。
function searchHandle(){
var searchVal = document.getElementById("searchBox").value;
var html = $("#navmenu").html();
$("#navmenu i.menu-icon").each(function(ind,itm){
var _t = $(this);
var _li = _t.closest('li');
var _tx = "";
if (_t[0].nextSibling.nodeType==3){
_tx = _t[0].nextSibling.nodeValue || _t[0].nextSibling.innerText;
}else if(_t[0].nextSibling.nodeType==1){
_tx = _t[0].nextSibling.innerText;
}
if (typeof _t.data('originText')=="undefined"){
_t.data('originText', _tx);
}else{
_tx = _t.data('originText');
}
_t[0].nextSibling.innerHTML = _tx;
if (_tx.indexOf(searchVal)==-1){
_li.hide();
return ;
}else{
// show parent menu
_li.show();
if (searchVal!=""){
var _parentLi = _li.parent().closest('li');
while(_parentLi.length>0 && _parentLi.closest('#navmenu').length>0 ){
_parentLi.show();
// // ace.submenu.show(_parentLi);
//if (_parentLi.attr("class") && _parentLi.attr("class").indexOf("open") == -1) _parentLi.children(0).click();
_parentLi = _parentLi.parent().closest('li');
}
_yellowtx = _tx.replace(searchVal, function(word){
return "<b style='background-color:yellow;'>"+word+"</b>"
});
$(_t[0].nextSibling).remove();
$("<span>"+_yellowtx+"</span>").insertAfter(_t);
//$("<span>"+_yellowtx+"</span>").replaceWith(_t[0].nextSibling);
}
}
});
//$("#navmenu").find("li.hsub:visible").removeClass('open');
expandFirstMenu($("#navmenu"))
return ;
}
function expandFirstMenu(mymenu){
var dropdownMenu = mymenu.find("li:visible a.dropdown-toggle").eq(0);
if (dropdownMenu.length>0){
if (!dropdownMenu.parent().hasClass('open')){
console.log(dropdownMenu.text());
//dropdownMenu.click(); //-- 会导致lu的高度为0, 点击不能展开
dropdownMenu.parent().addClass('open')
dropdownMenu.next().show();
}
expandFirstMenu(dropdownMenu.next())
}
}
imedical/web/csp/websys.frames.csp
新增红色框的代码:
代码文本:
<!--新增搜索框-->
<div class="sidebar-shortcuts" id="sidebar-shortcuts">
<div class="sidebar-shortcuts-large" id="sidebar-shortcuts-large">
<div class="navbar-header pull-left">
<strong>
<span class="navbar-brand" style="height:30px;padding:5px 5px;font-size:14px;color:#1095F1">
输入菜单名查询
</span>
</strong>
</div>
<div class="navbar-header pull-left" >
<table>
<tr>
<td><input id="searchBox" type="text" class="form-control"></td>
<td><span class="input-group-btn">
<button id="searchBtn" class="btn btn-primary" type="button"><span class="glyphicon glyphicon-search"></span></button>
</span></td>
</tr>
</table>
</div>
<!-- /section:basics/sidebar.layout.shortcuts -->
</div>
<div class="sidebar-shortcuts-mini" id="sidebar-shortcuts-mini" style="background-color:#00A2E8;">
<img src="../scripts/bdp/Framework/assets/images/BDP.png" alt="BDPLogo" style="width: 30px; height: 30px; margin: 5px;"/>
</div>
</div><!-- /.sidebar-shortcuts -->
<!--新增搜索框完-->
访问量: 509905