jQuery UI Autocomplete输入过滤功能失效求助

问题原因 #

你的代码里，Autocomplete的source函数发起AJAX请求时，没有把用户输入的关键词传递给后端，导致每次请求都返回完整数据集，自然不会触发过滤逻辑；同时当前也没有在前端对返回数据做过滤处理。

解决方案 #

1. 传递关键词给后端（推荐方案）

修改AJAX请求的data参数，加入用户输入的request.term（jQuery UI Autocomplete提供的用户输入内容），让后端根据关键词返回过滤后的结果。

修改后的source部分代码：

source: function(request, response) {
    $.ajax({
        url: '/ajax/ajax-autocomplete-automotive.php',
        data: {
            vehicle: localStorage.getItem('vehicleId'),
            vColumns: 'autocomplete_phrases, image_path',
            term: request.term // 新增：传递用户输入的关键词
        },
        dataType: 'json',
        success: function(data) {
            response(data);
        }
    })
},

接着修改后端ajax-autocomplete-automotive.php，根据$_GET['term']对autocomplete_phrases做模糊查询，返回匹配的结果。示例PHP代码：

// 假设使用PDO操作数据库
$term = $_GET['term'] ?? '';
$vehicleId = $_GET['vehicle'] ?? '';

// 模糊查询匹配关键词的记录
$stmt = $pdo->prepare("SELECT autocomplete_phrases, image_path FROM your_table WHERE vehicle_id = ? AND autocomplete_phrases LIKE ?");
$stmt->execute([$vehicleId, "%{$term}%"]);
$rawData = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 整理成Autocomplete需要的结构（保留你的自定义字段）
$output = [];
foreach ($rawData as $row) {
    $output[] = [
        'label' => $row['autocomplete_phrases'],
        'value' => $row['autocomplete_phrases'],
        'phrase_svg' => $row['image_path']
    ];
}

echo json_encode($output);

2. 前端临时过滤方案（无需修改后端）

如果暂时无法调整后端，可以在前端拿到完整数据后，用jQuery UI自带的$.ui.autocomplete.filter方法做过滤：

修改source的success回调：

source: function(request, response) {
    $.ajax({
        url: '/ajax/ajax-autocomplete-automotive.php',
        data: {
            vehicle: localStorage.getItem('vehicleId'),
            vColumns: 'autocomplete_phrases, image_path'
        },
        dataType: 'json',
        success: function(data) {
            // 过滤出包含用户输入关键词的项
            var filteredData = $.ui.autocomplete.filter(data, request.term);
            // 按你需要的数量截取结果
            if (filteredData.length > 8) {
                filteredData = filteredData.slice(0, 8);
            }
            response(filteredData);
        }
    })
},

额外注意事项 #

• 确保返回的每个数据项包含label字段，Autocomplete默认用这个字段做匹配逻辑；如果你的数据用其他字段存储显示文本，要调整过滤规则。
• maxShowItems不是jQuery UI Autocomplete的原生配置项，需要手动截取结果数量（如上方案中的slice操作）。

内容的提问来源于stack exchange，提问作者Simon