jQuery UI Autocomplete选择后输入框显示HTML代码问题求助

问题核心：你当前的代码将带<span>标签的HTML字符串同时赋值给了label和value字段，选择选项时，Autocomplete默认会把value填充到输入框，导致HTML代码直接显示出来。

解决方案分两步修改： #

1. PHP端：分离显示文本和实际值

修改后端返回的JSON数据，将label设为带HTML的显示文本，value设为纯代码文本（不带任何标签）：

public function partCodeAutoc(Request $request)
{
    $return_arr3 = [];
    $type = $request->code_type;
    $part_code = $request->term;
    $column2 = "car_code";

    $query = Cars::where($column2, "LIKE", "%" . $part_code . "%")->where('car_status',3)->get();
    if ($query->count() > 0) {
        $uniqueCodes = [];
        foreach ($query as $rows) {
            $code = $rows->$column2;
            // 去重处理，避免重复项
            if (!in_array($code, $uniqueCodes)) {
                $uniqueCodes[] = $code;
                $row_array["label"] = $code.' <span class="badge badge-light-secondary" style="float:right;">Car</span>';
                $row_array["value"] = $code; // 仅存纯代码文本
                array_push($return_arr3, $row_array);
            }
        }
    }
    echo json_encode($return_arr3);
}

2. JS端：控制选择后的输入框值

在select事件中阻止默认行为，手动将纯文本的value填充到输入框，同时保留下拉项的HTML渲染：

$("#part_code").autocomplete({
    source: function (request, response) {
        let code_type = $("#service-chk").is(":checked") ? 1 : 0;
        $.ajax({
            url: "partCodeAutoC",
            type: "POST",
            dataType: "json", 
            data: {
                code_type: code_type,
                term: request.term,
            },
            success: function (data) {
                response(data);
            },
        });
    },
    minLength: 1,
    select: function (event, ui) {
        // 阻止默认行为，避免Autocomplete自动填充label到输入框
        event.preventDefault();
        // 设置输入框为纯代码文本
        $(this).val(ui.item.value);
    },
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li>")
        .append("<div>" + item.label + "</div>")
        .appendTo(ul);
};

原理说明 #

• 后端分离label和value：label负责下拉列表的带样式显示，value存储实际需要填充到输入框的纯文本。
• 前端select事件处理：通过event.preventDefault()阻止Autocomplete的默认填充逻辑，手动设置输入框值为纯文本的ui.item.value，既保留了下拉项的样式，又避免了HTML标签显示在输入框中。

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