Question

我有一个使用Smartmenus Bootstrap插件的下拉菜单。在下拉菜单中，有搜索按钮。当您键入它时，将自动显示已过滤的菜单。如何在我们点击搜索按钮时显示已过滤的菜单？

这是我jsfiddle。

以下是用于搜索功能的Javascript：

$("#searchText").on("keyup", function () {
var g = $(this).val().toLowerCase();
var parMenuArr = [];
var count = 0;
$(".menu").each(function () {
    var s = $(this).text().toLowerCase();
    if (s.indexOf(g) !== -1) {
        $(this).closest('.menu').show();
        var parMenu = $(this).attr('pm');
        if (parMenu != null && parMenu != '') {
            var add = 'true';
            for (var i = 0; i < parMenuArr.length; i++) {
                if (parMenuArr[i] == parMenu) {
                    add = 'false';
                    break;
                }
            }
            if (add == 'true') {
                parMenuArr[count] = parMenu;
                count = count + 1;
            }
        }
    } else {
        $(this).closest('.menu').hide();
    }
    //$(this).closest('.menu')[s.indexOf(g) !== -1 ? 'show' : 'hide']();
});
$(".menu").each(function () {
    var menu = $(this).attr('sm');
    if (menu != null && menu != '') {
        for (var i = 0; i < parMenuArr.length; i++) {
            if (parMenuArr[i].indexOf(menu) != -1) {
                $(this).closest('.menu').show();
            }
            if (menu == parMenuArr[i]) {
                $(this).closest('.menu').show();
                break;
            }
        }
    }
});
});

Answer 1

使用此代码。我希望它对你有用。

//search function by type
$("#searchText").on("keyup", function () {
    var g = $(this).val().toLowerCase();
    var parMenuArr = [];
    var count = 0;
   $(".menu").each(function () {
        var s = $(this).text().toLowerCase();
        if (s.indexOf(g) !== -1) {
            $(this).closest('.menu').show();
            var parMenu = $(this).attr('pm');
            if (parMenu != null && parMenu != '') {
                var add = 'true';
                for (var i = 0; i < parMenuArr.length; i++) {
                    if (parMenuArr[i] == parMenu) {
                        add = 'false';
                        break;
                    }
                }
                if (add == 'true') {
                    parMenuArr[count] = parMenu;
                    count = count + 1;
                }
            }
          $(this).closest('.menu').removeClass('u--hide');
        } else {
            $(this).closest('.menu').addClass('u--hide');
        }
        //$(this).closest('.menu')[s.indexOf(g) !== -1 ? 'show' : 'hide']();
    });
    $(".menu").each(function () {
        var menu = $(this).attr('sm');
        if (menu != null && menu != '') {
            for (var i = 0; i < parMenuArr.length; i++) {
                if (parMenuArr[i].indexOf(menu) != -1) {
                    $(this).closest('.menu').show();
                }
                if (menu == parMenuArr[i]) {
                    $(this).closest('.menu').show();
                    break;
                }
            }
        }
    });
});

$('.input-group button').on('click', function(){
     $(".menu").each(function () {
        var menu = $(this);
        if(menu.hasClass('u--hide')) {
            menu.parent().hide();
        } else {
            menu.parent().show();
        }

    });
});

Demo

Answer 2

您还可以使用以下代码： -

// NEW selector
jQuery.expr[':'].Contains = function(a, i, m) {
  return jQuery(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};
var showOrHideMenu = function(flag) {
    if ( flag ) {
        $( "a.menu").show();
  } else {
    $( "a.menu").hide();
  }
}
var updateSearch = function(that) {
    showOrHideMenu(false);
    var val = that.val();
  console.log("a.menu:contains('" + val + "')")
  var len = $( "a.menu:Contains('" + val + "')" ).length;
  var menu = $( "a.menu:Contains('" + val + "')" );

  if ( len ) {
        menu.addClass( "show" );
    menu.next('.submenu').find('a.menu').addClass("show")
    menu.closest('ul').prev('a.menu').addClass( "show" ).click();
  } else {
    $('.container-fluid').append("<label class='noMatch'>NO MATCH FOUND</lable>");
  }
};
var invokeSearch = function(search) {
      var len = search.val().trim().length || 0;
      showOrHideMenu(true);
      $('.noMatch').remove();
      $( "a.menu" ).removeClass( "show" );     
      $(".submenu").hide();
     if ( len > 0 ) {
            updateSearch(search);
      }
}
//search function by type
$("button").on("click", function () {
     var search = $('#searchText');
     invokeSearch(search);
});

$("#searchText").on("keyup", function (e) {
    if (e.keyCode == 13) {
      var search = $(this);
      invokeSearch(search);
    }
});

css几乎没有变化： -

li {
  list-style: none;
}

我们完成了。这是DEMO

搜索按钮OnClick在下拉菜单中

2 个答案: