jquery模糊查询

jQuery模糊查询实现方法

在jQuery中实现模糊查询通常涉及对输入内容进行动态筛选，以下是几种常见方法：

使用:contains()选择器

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

结合正则表达式实现更灵活的匹配

$("#searchInput").on("input", function() {
    var pattern = new RegExp($(this).val(), "i");
    $(".target-elements").each(function() {
        $(this).toggle(pattern.test($(this).text()));
    });
});

结合AJAX实现远程模糊查询

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

使用第三方插件如Select2

$(".select2-input").select2({
    minimumInputLength: 1,
    ajax: {
        url: "/api/search",
        dataType: 'json',
        delay: 250,
        data: function (params) {
            return { q: params.term };
        },
        processResults: function (data) {
            return { results: data.items };
        }
    }
});

性能优化建议

• 使用input事件替代keyup可获得更流畅的体验
• 对于大型数据集，考虑添加防抖函数
• 服务器端搜索时添加延迟请求
• 考虑使用Web Worker处理大量本地数据

注意事项

• 中文搜索需注意编码问题
• 大小写敏感度根据需求调整
• 特殊字符需要转义处理
• 移动端需考虑虚拟键盘带来的事件差异