Getting HTML in input on select in jquery ui autocomplete

I am using jquery ui autocomplete to fetch cars,parts,and services from my database, i am diffrentiating both or three records type by adding span in last. But when i select any value its showing span html code in input with code how can i fix that ?

php:

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

        $query = Cars::where($column2, "LIKE", "%" . $part_code . "%")->where('car_status',3)->get();
        if ($query->count() > 0) {
            foreach ($query as $rows) {
                $newdata = $rows->$column2.' <span class="badge badge-light-secondary" style="float:right;">Car</span>';
                array_push($return_arr1, $newdata);
            }
        $return_arr2 = array_unique($return_arr1);
        foreach ($return_arr2 as $key => $value) {
            $row_array["label"] = $value;
            $row_array["value"] = $value;
            array_push($return_arr3, $row_array);
        }
        echo json_encode($return_arr3);
}

js:

$("#part_code").autocomplete({
    source: function (request, response) {
      if ($("#service-chk").is(":checked")) code_type = 1; 
      else code_type = 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) {

    },
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li>")
        .append("<div>" + item.label + "</div>")
        .appendTo(ul);
};