jquery 搜索
jQuery 搜索功能实现
要实现 jQuery 搜索功能，通常涉及 DOM 元素筛选、AJAX 请求或结合输入框事件监听。以下是几种常见方法：
使用 :contains() 选择器筛选内容
$("#searchInput").on("keyup", function() {
var searchText = $(this).val().toLowerCase();
$(".target-element").each(function() {
var content = $(this).text().toLowerCase();
$(this).toggle(content.includes(searchText));
});
});- 监听输入框的
keyup事件，实时匹配目标元素的文本内容。 toggle()根据匹配结果显示或隐藏元素。
结合 AJAX 实现动态搜索
$("#searchInput").on("input", function() {
var query = $(this).val();
$.ajax({
url: "/api/search",
data: { q: query },
success: function(results) {
$("#results-container").html(results);
}
});
});- 通过
input事件触发 AJAX 请求，后端返回匹配结果后更新页面。
使用 filter() 方法精确匹配
$("#searchButton").click(function() {
var keyword = $("#searchInput").val();
$(".item").filter(function() {
return $(this).text().indexOf(keyword) === -1;
}).hide();
});- 点击按钮后隐藏不包含关键字的元素，
filter()用于条件筛选。
模糊搜索（高亮匹配项）
$("#searchInput").on("keyup", function() {
var regex = new RegExp($(this).val(), "gi");
$(".content").html(function(_, html) {
return html.replace(regex, "<span class='highlight'>$&</span>");
});
});- 使用正则表达式全局匹配并高亮显示关键词。
注意事项
- 对大量数据使用防抖（
debounce）优化性能，避免频繁触发搜索。 - 后端搜索需结合数据库索引提高效率。
- 移动端兼容性需测试
input或keyup事件的响应速度。
示例依赖 jQuery 库，确保在 HTML 中提前引入：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
