Search Button OnClick in Dropdown Menu

Question

I have a dropdown menu using Smartmenus Bootstrap addon. And inside of dropdown menu, there is search button. When you type it will automatically shown the menu filtered. How to made the filtered menu only show when we click search button?

This is jsfiddle that I've made.

Below is Javascript for 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. I hope it will work 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 below code:-

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

Little change in css:--

li {
  list-style: none;
}

And we are done. Here is the DEMO