Feature : I made a live menu search

My menu end up with long list so I thought I shall use that search box to search menu. And may be someone find this useful too.

• 1. I added a class to the search box

<input type="text" name="q" class="form-control search-menu-box" placeholder="Search...">

• 1. Added this jQuery script

$(".search-menu-box").on('input', function() {
    var filter = $(this).val();
    $(".sidebar-menu > li").each(function(){
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).hide();
        } else {
            $(this).show();
        }
    });
});

Based on the codes from this link http://www.designchemical.com/blog/index.php/jquery/live-text-search-function-using-jquery/

[surferxo3]

`$.fn.openMenu = function () {
	var className = $(this).attr('class');

	if (className == 'treeview') {
		$(this).addClass('active');
	} else if (className == 'treeview-menu') {
		$(this).addClass('menu-open');
		$(this).css({display: 'block'});
	}
};

$.fn.closeMenu = function () {
	var className = $(this).attr('class');
	var count = $(this).length;

	if (count > 1) {
		$.each($(this), function(key, element) {
			className = $(element).attr('class');

			if (className == 'treeview active') {
				$(element).removeClass('active');
			} else if (className == 'treeview-menu menu-open') {
				$(element).removeClass('menu-open');
				$(element).css({display: 'none'});
			}
		});
	} else {
		if (className == 'treeview active') {
			$(this).removeClass('active');
		} else if (className == 'treeview-menu menu-open') {
			$(this).removeClass('menu-open');
			$(this).css({display: 'none'});
		}
	}
};

$('.search-menu-box').on('input', function() {
	var filter = $(this).val();

	$('.sidebar-menu li').each(function() {
		if ($(this).text().search(new RegExp(filter, 'i')) < 0) {
			$(this).hide();
		} else {
			$(this).show();
			$(this).parentsUntil('.treeview').openMenu();
		}
	});
});`

The code snippet seems to have problem when making search box empty i.e. all multi-level menu items remain open. In addition the rightmost arrows are not working as expected. Can anyone if possible provide the rectified solution to this?

[iprastha]

If you would like the search to include child items, simply replace

...
$(".sidebar-menu > li").each(function(){
...

to

...
$(".sidebar-menu li").each(function(){
...