jquery 搜索

jQuery 搜索功能实现方法

使用 jQuery 筛选元素

通过 :contains() 选择器可以匹配包含指定文本的元素。

$("li:contains('搜索词')").css("background-color", "yellow");

动态搜索输入框实现

监听输入框的 keyup 事件，动态筛选匹配的内容。

$("#searchInput").on("keyup", function() {
    var searchText = $(this).val().toLowerCase();
    $("li").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(searchText) > -1);
    });
});

结合 AJAX 进行远程搜索

从服务器获取匹配的数据并动态渲染。

$("#searchInput").on("keyup", function() {
    var query = $(this).val();
    $.ajax({
        url: "/api/search",
        data: { q: query },
        success: function(data) {
            $("#results").html(data);
        }
    });
});

使用 fuzzy.js 实现模糊搜索

结合模糊搜索库提升用户体验。

var options = {
    keys: ['name', 'description']
};
var fuse = new Fuse(dataList, options);
$("#searchInput").on("keyup", function() {
    var results = fuse.search($(this).val());
    renderResults(results);
});

高亮匹配文本

使用正则表达式动态高亮搜索结果。

function highlight(text, searchTerm) {
    var regex = new RegExp(searchTerm, "gi");
    return text.replace(regex, "<span class='highlight'>$&</span>");
}

注意事项

• 避免频繁触发搜索请求，可使用 debounce 优化性能。
• 确保搜索逻辑大小写不敏感，提升用户体验。
• 后端搜索需结合索引优化查询效率。