,可以通过以下步骤实现:
<input type="text" id="searchInput" placeholder="输入关键词进行搜索">
<ul id="searchResults"></ul>
$(document).ready(function() {
// 监听搜索框的输入事件
$('#searchInput').on('input', function() {
var searchKeyword = $(this).val().toLowerCase(); // 获取搜索关键词并转为小写
// 遍历列表中的每个元素,检查是否包含关键词
$('#searchResults li').each(function() {
var listItemText = $(this).text().toLowerCase(); // 获取列表项的文本并转为小写
// 如果列表项包含关键词,则显示;否则隐藏
if (listItemText.indexOf(searchKeyword) !== -1) {
$(this).show();
} else {
$(this).hide();
}
});
});
});
// 在搜索结果中排除具有.exclude类名的元素
if (listItemText.indexOf(searchKeyword) !== -1 && !$(this).hasClass('exclude')) {
$(this).show();
} else {
$(this).hide();
}
// 在搜索结果中排除具有data-exclude属性的元素
if (listItemText.indexOf(searchKeyword) !== -1 && !$(this).data('exclude')) {
$(this).show();
} else {
$(this).hide();
}
// 在搜索结果中排除具有特定HTML结构的元素
if (listItemText.indexOf(searchKeyword) !== -1 && !$(this).find('.exclude-element').length) {
$(this).show();
} else {
$(this).hide();
}
领取专属 10元无门槛券
手把手带您无忧上云