javascript - 在下拉菜单中搜索按钮 OnClick

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