我有一个使用 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;
}
}
}
});
});
最佳答案
使用此代码。我希望它对你有用。
//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();
}
});
});
关于javascript - 在下拉菜单中搜索按钮 OnClick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36994968/