表单提交后重新渲染Symfony UX Autocomplete，如何显示标签而非ID？

方案一：服务器端预加载初始选项 #

表单重新渲染时，先根据提交的ID获取对应标签，再通过tom_select_options的items参数传入初始选项，让Tom Select初始化时直接使用预定义的标签显示。

// 获取表单初始值（从请求或表单数据中获取）
$initialValue = $builder->getData()['input'] ?? null;
$initialItems = [];

if ($initialValue) {
    // 替换为你获取标签的逻辑，比如调用内部服务或查询数据
    $label = $this->yourDataService->getLabelById($initialValue);
    $initialItems[] = [
        'value' => $initialValue,
        'text' => $label
    ];
}

$builder
    ->add('input', TextType::class, [
        'autocomplete' => true,
        'autocomplete_url' => 'https://path-to-autocomplete',
        'tom_select_options' => [
            'create' => false,
            'preload' => true,
            'maxItems' => 1,
            'delimiter' => '/',
            'items' => $initialItems, // 传入预加载的选项
        ],
    ])
;

方案二：前端JS动态获取标签 #

如果不想在服务器端处理，可通过自定义JS在Tom Select初始化后，检查初始值并调用接口获取标签，再更新选项。

在模板中添加以下JS代码：

document.addEventListener('DOMContentLoaded', function() {
    const input = document.querySelector('[name="input"]');
    if (!input || !input.value) return;

    const tomSelect = input.tomselect;
    if (!tomSelect) return;

    // 调用autocomplete接口（确保接口支持通过ID查询对应项）
    fetch(`https://path-to-autocomplete?query=${input.value}`)
        .then(res => res.json())
        .then(data => {
            const matchedItem = data.find(item => item.value === input.value);
            if (matchedItem) {
                tomSelect.addOption(matchedItem);
                tomSelect.setValue(matchedItem.value);
            }
        });
});

方案三：使用数据转换器 #

创建数据转换器，在表单渲染时将ID转换为标签，提交时保持ID不变。

首先定义转换器类：

use Symfony\Component\Form\DataTransformerInterface;
use Symfony\Component\Form\Exception\TransformationFailedException;

class IdToLabelTransformer implements DataTransformerInterface
{
    private $dataService;

    public function __construct(YourDataService $dataService)
    {
        $this->dataService = $dataService;
    }

    // 渲染表单时：ID → 标签
    public function transform($value)
    {
        if (null === $value) return '';

        $label = $this->dataService->getLabelById($value);
        if (!$label) {
            throw new TransformationFailedException("找不到ID为{$value}对应的标签");
        }

        return $label;
    }

    // 提交表单时：标签 → ID（因配置create: false，用户无法自定义输入，直接返回值即可）
    public function reverseTransform($value)
    {
        return $value;
    }
}

然后在表单中添加转换器：

$builder->get('input')
    ->addModelTransformer(new IdToLabelTransformer($this->yourDataService));

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