当选项来自远程时（获取 API 调用），如何在 TomSelect 中预填充项目

Question

我有一个带有 TomSelect 下拉列表的 PHP 应用程序，它允许我选择在网站上工作的人员。

由于此列表很大，我通过标准

fetch

调用填写这些选项。

这是我的代码示例（有效）：

<select id="persons" placeholder="Pick an person..." multiple></select>

<script>

    var persons = new TomSelect("#persons", {
        maxOptions: 10,
        create: false,
        onItemAdd: function () {
            this.setTextboxValue('');
            this.refreshOptions();
        },
        
        valueField: 'id',
        labelField: 'completename',
        searchField: 'completename',

        items: [34276,2],
        
        // fetch remote data
        load: function(query, callback) {

            var url = 'http://host/api/staff?q=' + encodeURIComponent(query);
            fetch(url)
                .then((response) => response.json())
                .then(json => {
                    callback(json);
                }).catch(()=>{
                    callback();
            });

        },

        // custom rendering functions for options and items
        render: {
            option: function (data, escape) {
                return '<div class="d-flex"><span>' + escape(data.completename) + '</span></div>';
            },
            item: function (data, escape) {
                return '<span class="tag is-info mb-1 mr-1">' + escape(data.completename) + '</span>';
            }
        }
    });
    
</script>

发布表单时，所有内容都会通过 PHP 正确保存到数据库中。

我的问题是关于编辑网站（当我回来编辑分配给网站的人员时）。

如何预选/预填已分配的人员（示例中的

34276

和

2

）并将其正确放入初始选项中。我尝试过使用初始数组

items[]

，但是这个数组只接受

selectedValues

的ID，但显然不是人们的完整姓名。

我显然有可用的 PHP 对象，例如

$site->getPersons()

，我可以循环获取 ID 和完整名称。

如果我随后使用

addOption

和

addItem

执行此操作（或者如果我使用

<option value="1" selected="selected">Roberta</option>

在 HTML 中添加分配的人员），它可以工作，但行为很糟糕，因为这些预先分配的人员永久保留在即使我取消选择它们并且 fetch API 调用为空，下拉列表也会开始。如图所示。

persons.addOption({
    id: 4,
    completename: 'Something New',
});

persons.addOption({
    id: 2,
    completename: 'Hans',
});

persons.addOption({
    id: 1,
    completename: 'Roberta',
});


persons.addItem(1);
persons.addItem(4);
persons.addItem(2);

问我的问题的另一种更简短的方式是：

如何防止我的 TomSelect 下拉列表（旨在通过 fetch Remote 接收选项）在通过 addOption 添加的“静态”选项已可见的情况下打开。

我希望它是空的，直到进行获取调用为止。

Answer 1

我找到了解决方案。

我只需要添加

persist:false

选项。

如官方 TomSelect 文档中所定义：

persist：如果为 false，则用户创建的项目在取消选择后将不会显示为可用选项。

现在，我可以预先填写

items[]

并正确删除它们，而不会污染下拉列表。