基于jQuery的使用Ajax动态执行模糊查询功能，一文详解

$(document).ready(function() {
    $('#search-input').on('input', function() {
        var inputContent = $(this).val();
        if (inputContent.length >= 2) {
            $.ajax({
                url: '/path/to/your/api', // 替换为你的API路径
                type: 'GET',
                data: {
                    search: inputContent
                },
                success: function(data) {
                    // 假设返回的数据是对象数组
                    var listItems = data.map(function(item) {
                        return $('<li>').text(item.name); // 假设每个对象有一个name属性
                    });
                    $('#results-list').empty().append(listItems);
                },
                error: function(error) {
                    console.error('Error fetching data: ', error);
                }
            });
        } else {
            $('#results-list').empty();
        }
    });
});

这段代码使用jQuery和Ajax来实现了一个基本的模糊查询功能。当用户在搜索框中输入内容时，如果输入长度大于等于2个字符，就会向服务器发送GET请求来查询数据。成功获取数据后，将结果动态添加到列表中，否则清空列表。这个例子演示了如何在前端使用Ajax进行数据的动态加载和显示，是一个前端开发者必知必会的技能。