OnClick search button in dropdown menu

Question

I have a dropdown using Smartmenus Bootstrap addon. And inside the drop-down menu there is a search button. When you type it, it will automatically show that the menu is being filtered. How to make the filtered menu appear only when you click the search button? Please help and thanks in advanced condition.

This is the jsfiddle I made.

Below is the Javascript for the search function.

$("#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

Use this code. Hope this works for you.

//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

You can also use the code below: -

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

A small change in css: -

li {
  list-style: none;
}

. DEMO