adminLTE框架菜单搜索功能的实现

<!-- search form -->
      <form action="javascript:searchMenu()" method="get" class="sidebar-form">
        <div class="input-group">
          <input type="text" name="search-text" class="form-control" placeholder="搜索...">
          <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
              </span>
        </div>

      </form>



$(function(){
  locationMenu();
  });
 
  //定位菜单
  function locationMenu(){
  var path = window.location.pathname;
  var paths = path.replace(".do","").split("/").reverse();
  $("#"+paths[2]).addClass("active").addClass("menu-open");
  $("#"+paths[2]+"-"+paths[1]).addClass("active");
  }

//搜索菜单
  function searchMenu(){
  var searchtext = $("input[name=search-text]").val();
  //1.上一步搜索隐藏掉的全部显示出来
  $(".treeview").show();
  $(".treeview ul li").show();
  $(".treeview").removeClass("active").removeClass("menu-open");
  //2.搜索词为空直接不筛选,直接归位
  if(searchtext == null || searchtext == ""){
  locationMenu();
  return;
  }
  //3.遍历每组菜单进行匹配
  $(".treeview").each(function(){
  var title1 = $(this).find("a span").html();
  if(title1.indexOf(searchtext) > -1){
  $(this).addClass("active").addClass("menu-open");
  return;
  }
  var count = 0; //统计符合条件的子菜单数量
  var father = this;
  $(this).find("ul li").each(function(){
  var title2 = $(this).html();
  if(title2.indexOf(searchtext) > -1){
  count++;
  }else{
  $(this).hide();
  }
  });
  if(count == 0){
  $(this).hide();
  }else{
  $(father).addClass("active").addClass("menu-open");
  }
  });
  }

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值