删除 Tom Select 中配置了外部数据的所有先前选择的选项

Question

我有两个通过 Symfony UX Autocomplete 和 Stimulus 配置的 Tom Select（选择输入）：

首先持有主类别（示例中的“Batterie démarrage moto”）。

第二个是多个子类别，其父类别是第一个选择的主类别（示例中的“Batterie moto AGM”和“Batterie moto GEL”）。

每个 Tom Select 都配置有 AJAX 外部数据。

当用户更新主类别时，会在主类别中调度更改事件：

_onConnect(event) {
    this.#tomSelect = event.detail.tomSelect;
    this.#tomSelect.on('change', this._onChange.bind(this));
}

_onChange(value) {
    this.dispatch("change", {
        detail: {
            id: value
        }
    });

    if (value) {
        this.#tomSelect.blur();
    }
}

然后在子类别控制器（

reset

）中执行

data-action="erp--product--main-category:change@window->erp--product--sub-categories#reset"

刺激动作：

• 重置子类别选项（选定和未选定）
• 更新子类别 Tom 选择带有新父 ID 的自动完成 URL（主类别一）

子类别 Tom Select 显示刷新的结果，但之前选择的子类别仍然出现在新记录的下拉列表中：

这些选项保留在选择元素中：

我通过我们心爱的 Stack Overflow 和网络尝试了多种解决方案：

# this.#tomSelect is the Tom Select instance
this.#tomSelect.clear();
this.#tomSelect.clearOptions();
this.#tomSelect.clearCache();
this.#tomSelect.refreshOptions();
this.#tomSelect.sync();

我试图通过 Symfony 强制这些 Tom Select 选项：

"tom_select_options" => [
    "create" => false,
    "persist" => false,
]

我发现的唯一方法是在清除 Tom Select 选项后重置选择的 HTML 内容：

this.#tomSelect.clear();
this.#tomSelect.clearOptions();

this.element.innerHTML = '';

您认为这是最好的解决方案吗？

不然我还能做什么？

Answer 1

我没有 simulus UX，但我在 tom-select 上遇到了同样的问题。每次 ajax 调用后我都必须手动清除选项。我仍然为那些像我一样登陆这里的人发布代码。

new TomSelect('#select-repo',{
        valueField: 'url',
        labelField: 'name',
        searchField: 'name',
        // fetch remote data
        load: function(query, callback) {
            var self = this;
            var url = 'https://api.github.com/search/repositories?q=toto'
            fetch(url)
                .then(response => response.json())
                .then(json => {
                    self.clearOptions();//needed to reset options
                    callback(json.items);
                }).catch(()=>{
                    callback();
                });

        },