jquery模糊查询

jQuery模糊查询实现方法

使用jQuery进行模糊查询通常涉及监听输入事件、过滤数据并动态更新页面。以下是几种常见实现方式：

输入框实时过滤

$('#searchInput').on('input', function() {
    const searchText = $(this).val().toLowerCase();
    $('.item').each(function() {
        const itemText = $(this).text().toLowerCase();
        $(this).toggle(itemText.includes(searchText));
    });
});

结合AJAX的后端查询

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

使用jQuery选择器进行简单匹配

$('#searchBtn').click(function() {
    const keyword = $('#keyword').val();
    $('div:contains("' + keyword + '")').css('background', 'yellow');
});

正则表达式实现高级匹配

$('#searchInput').keyup(function() {
    const regex = new RegExp($(this).val(), 'i');
    $('.item').hide().filter(function() {
        return regex.test($(this).text());
    }).show();
});

注意事项

• 对于大量数据建议使用防抖(debounce)技术减少请求频率
• 前端模糊查询适合小数据集，大数据集应使用后端搜索
• 考虑使用第三方库如Fuse.js实现更复杂的模糊匹配算法
• 注意处理特殊字符避免XSS攻击

性能优化建议

• 缓存DOM查询结果避免重复查找
• 使用事件委托减少事件监听器数量
• 对于静态数据可预先建立搜索索引
• 考虑使用Web Worker处理大量数据的搜索