基于MySQL的多列展示自动完成搜索框实现方案咨询

你当前用的是jQuery UI的Autocomplete组件，默认只支持单行纯文本展示，要实现多字段独立样式、单条结果多行展示，只需要调整后端返回格式+扩展前端渲染逻辑即可，具体改法如下：

1. 调整后端PHP接口（ajax-db-search.php） #

你现在的代码有两个问题：一是直接把用户输入拼接到SQL语句里，存在严重的SQL注入风险；二是把多字段拼成空格分隔的字符串，前端没法单独给字段加样式。
修改后返回结构化JSON数据，每个结果保留独立字段，同时用预处理语句做安全防护：

<?php
require_once "db.php";
if (isset($_GET['term'])) {
    $res = [];
    // 用预处理语句防止SQL注入
    $keyword = $_GET['term'] . '%';
    $stmt = mysqli_prepare($conn, "SELECT DISTINCT MFG_Item_ID, MFG_Name, Price FROM H_Item_Master WHERE MFG_Item_ID LIKE ? LIMIT 5");
    mysqli_stmt_bind_param($stmt, "s", $keyword);
    mysqli_stmt_execute($stmt);
    $result = mysqli_stmt_get_result($stmt);
    
    if (mysqli_num_rows($result) > 0) {
        while ($row = mysqli_fetch_assoc($result)) {
            // 保留独立字段，value是选中后自动填充到输入框的内容
            $res[] = [
                'value' => $row['MFG_Item_ID'], // 选中后输入框填充商品编号，可按需修改
                'item_id' => $row['MFG_Item_ID'],
                'mfg_name' => $row['MFG_Name'],
                'price' => $row['Price']
            ];
        }
    }
    echo json_encode($res);
}
?>

2. 调整前端代码，自定义下拉项渲染 #

jQuery UI Autocomplete开放了_renderItem扩展方法，你可以完全自定义每个搜索结果的HTML结构，配合CSS就能实现任意样式效果，比如单条结果分三行展示、不同字段用不同字号颜色。
首先修改index.php里的JS初始化代码：

$(function() {
    $("#term").autocomplete({
        source: 'ajax-db-search.php',
        minLength: 1 // 输入1个字符就触发搜索，可按需调整
    }).autocomplete("instance")._renderItem = function(ul, item) {
        // 自定义每个下拉项的HTML结构，示例为三行展示，可自由调整结构
        const itemHtml = `
            <div class="search-result-item">
                <div class="item-id">${item.item_id}</div>
                <div class="item-mfg">生产厂商：${item.mfg_name}</div>
                <div class="item-price">售价：¥${item.price}</div>
            </div>
        `;
        return $("<li>")
            .append(itemHtml)
            .appendTo(ul);
    };
});

然后加对应的CSS样式，给不同字段设置独立效果：

.search-result-item {
    padding: 6px 12px;
    line-height: 1.4;
}
.search-result-item .item-id {
    font-weight: 600;
    font-size: 14px;
    color: #212529;
}
.search-result-item .item-mfg {
    font-size: 12px;
    color: #6c757d;
    margin: 2px 0;
}
.search-result-item .item-price {
    font-size: 13px;
    color: #dc3545;
    text-align: right;
}

注意事项 #

• 如果想要三列并排展示，只需要给.search-result-item加display: flex; justify-content: space-between; align-items: center;的CSS属性，把三个子元素改成同行排列即可
• 不要省略返回数据里的value字段，这个字段是组件用来识别选中后填充到输入框的内容，你可以根据需求改成商品名或者其他你想要填充的值
• 后端必须用预处理语句处理用户输入，直接拼接SQL会被攻击者拖库，是非常严重的安全隐患
• 自定义渲染的<li>标签不要移除组件默认绑定的类名，否则会导致键盘上下选择、点击选中的交互失效

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