在输入后使用jQuery/JavaScript搜索侧边菜单列表可以通过以下步骤实现:
keyup
或input
事件,以便在用户输入时进行搜索。可以使用jQuery的on()
方法来绑定事件监听器。$('#search-input').on('keyup', function() {
// 搜索逻辑
});
val()
方法来获取输入框的值。var keyword = $(this).val();
each()
方法来遍历元素集合,并使用JavaScript的字符串方法(如indexOf()
)来判断关键字是否匹配。$('.sidebar-item').each(function() {
var menuItem = $(this).text();
if (menuItem.toLowerCase().indexOf(keyword.toLowerCase()) !== -1) {
// 匹配到的操作
}
});
// 显示匹配项
$(this).show();
// 隐藏未匹配项
$(this).hide();
$(document).ready()
方法来确保代码在DOM加载完成后执行。$(document).ready(function() {
$('#search-input').on('keyup', function() {
var keyword = $(this).val();
$('.sidebar-item').each(function() {
var menuItem = $(this).text();
if (menuItem.toLowerCase().indexOf(keyword.toLowerCase()) !== -1) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
这样,当用户在搜索输入框中输入关键字时,侧边菜单列表将根据关键字进行动态搜索和过滤,显示匹配项并隐藏未匹配项。
领取专属 10元无门槛券
手把手带您无忧上云