Symfony UX Autocomplete：Ajax请求后无法添加新选项求助

问题核心在于仅修改Stimulus控制器的URL属性不会触发自动完成组件的数据源更新，且refreshOptions()无法强制重新加载远程数据。以下是修正后的实现：

1. 修正JavaScript逻辑 #

直接操作Stimulus控制器实例，更新URL后强制触发数据加载，并重置TomSelect状态：

<script>
document.addEventListener('DOMContentLoaded', () => {
    const descriptionSelect = document.getElementById('signalement_form_description');
    const complementSelect = document.getElementById('signalement_form_complement');
    const complementControllerElement = complementSelect.closest('[data-controller="symfony--ux-autocomplete--autocomplete"]');

    if (!descriptionSelect || !complementSelect || !complementControllerElement) {
        console.error('Les champs ou le contrôleur Stimulus ne sont pas disponibles.');
        return;
    }

    // 获取Stimulus控制器实例
    const complementController = window.Stimulus.getControllerForElementAndIdentifier(
        complementControllerElement,
        'symfony--ux-autocomplete--autocomplete'
    );

    descriptionSelect.addEventListener('change', (event) => {
        const descriptionId = event.target.value;

        if (descriptionId) {
            complementSelect.disabled = false;
            const newAutocompleteUrl = `/complements/${descriptionId}`;

            // 更新控制器的URL值（通过Stimulus的setValue方法触发响应）
            complementController.setValue('url', newAutocompleteUrl);
            
            // 清空现有选项并强制加载新数据
            if (complementSelect.tomselect) {
                // 清空所有选项
                complementSelect.tomselect.clearOptions();
                // 触发远程数据加载
                complementSelect.tomselect.load(function(callback) {
                    fetch(newAutocompleteUrl)
                        .then(response => response.json())
                        .then(data => callback(data))
                        .catch(() => callback([]));
                });
            }
        } else {
            complementSelect.disabled = true;
            if (complementSelect.tomselect) {
                complementSelect.tomselect.clearOptions();
                complementSelect.tomselect.clear();
            }
        }
    });
});
</script>

2. 关键修正点 #

• 直接操作Stimulus控制器：使用window.Stimulus.getControllerForElementAndIdentifier获取控制器实例，通过setValue方法更新URL，确保控制器感知到变化。
• 手动触发数据加载：调用TomSelect的load方法，直接通过新URL拉取数据并填充选项，替代无效的refreshOptions()。
• 重置状态：清空旧选项并在未选择description时重置complement字段，避免残留数据。

3. 额外检查项 #

• 确保/complements/${descriptionId}路由返回的JSON格式严格匹配要求：每个对象必须包含value和text键（与你提供的返回格式一致即可）。
• 检查ComplementAutocompleteField是否正确继承Symfony UX Autocomplete的配置，确保没有自定义逻辑干扰数据源加载。

内容的提问来源于stack exchange，提问作者J.BizMai