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");
  }
  });
  }


版权声明:本文为abcmaopao原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。