基于jQuery的使用Ajax动态执行模糊查询功能

$(document).ready(function() {
    $('#search-input').on('input', function() {
        var input = $(this).val();
        if (input.length >= 2) { // 最小查询长度为2
            $.ajax({
                url: '/path/to/fuzzy/search', // 替换为你的API路径
                type: 'GET',
                data: {
                    q: input
                },
                success: function(data) {
                    // 假设返回的数据是数组，你可以遍历并显示结果
                    var results = data; // 假设返回的数据已经是处理好的结果
                    var list = $('#results-list');
                    list.empty(); // 清空之前的结果
                    if (results.length) {
                        results.forEach(function(item) {
                            list.append('<li>' + item + '</li>'); // 添加每个搜索结果
                        });
                    } else {
                        list.append('<li>没有找到匹配项</li>');
                    }
                },
                error: function(error) {
                    console.error('搜索失败:', error);
                }
            });
        }
    });
});

这段代码首先监听搜索框的输入事件，当输入长度大于等于2时，通过Ajax向服务器发送GET请求，请求中携带查询参数。成功获取数据后，将结果动态添加到页面的列表中，并清空之前的结果。如果没有找到匹配项，则显示相应的提示信息。