我目前在使用Tabulator.js，想要创建一个带有搜索功能的多选列。我尝试用Select2库来实现，但遇到了一些问题。

以下是我使用的代码：

JavaScript 代码 #

const tabledata = [
    {
        id: 1,
        name: "Oli Bob",
        select2: ['two', 'three']
    },
    {
        id: 2,
        name: "Mary May",
        select2: ['two']
    },
    {
        id: 3,
        name: "Christine Lobowski",
        select2: ['two']
    },
    {
        id: 4,
        name: "Brendon Philips",
        select2: ['two']
    },
    {
        id: 5,
        name: "Margret Marmajuke",
    },
];

const list = [
    {
        id: 'one',
        text: 'one'
    },
    {
        id: 'two',
        text: 'two'
    },
    {
        id: 'three',
        text: 'three'
    }
];

const select2Editor = function (cell, onRendered, success, cancel, editorParams) {
    const editor = document.createElement("select");


    onRendered(function () {
        const select_2 = $(editor);

        select_2.select2({
            data: list,
            width: '100%',
            multiple: true,
            minimumInputLength: 0,
        })

        if (typeof cell.getValue() == 'object') {
            const selectedValuesIds = cell.getValue().map(val => list.find(x => x.text == val).id)
            select_2.val(selectedValuesIds).trigger('change')
        }

        select_2.on('select2:select select2:unselect', () => {
            const data = select_2.select2('data')
            const cellValue = data.map(el => el.text)
            success(cellValue)
        });


        // $(editor).on('blur', () => cancel)

        editor.focus()
    });

    return editor;
};

const table = new Tabulator("#table", {
    // debugEventsExternal: true,
    // debugEventsInternal: true,
    height: "500px",
    data: tabledata,
    rowHeight: 32,
    columns: [
        {
            title: "Name",
            field: "name",
            width: 150
        },
        {
            title: "Select2",
            field: "select2",
            width: 300,
            editor: select2Editor,
        },
    ],
});

HTML 代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@6.0.0/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@6.0.0/dist/js/tabulator.min.js"></script>
<div id="table"></div>

使用这段代码时，我遇到了以下问题：

• 要打开下拉列表，我得先点击单元格让编辑器出现，然后再点击一次才能打开列表，这感觉很麻烦也不直观。
• 如果我在列表打开的时候点击其他不可编辑的单元格，焦点不会消失。我试过添加$(editor).on('blur', () => cancel)，但这样列表根本打不开，因为当列表打开时，焦点会转移到Select2元素上，编辑器就关闭了。

我想知道有没有更简单的实现方式，比如不用额外的库？或者是不是我在当前用Select2的方法里漏掉了什么？希望能得到帮助和指导，谢谢！

备注：内容来源于stack exchange，提问作者Валентин Шмелев