javascript - 使用 select2 : When using transport-function, 结果不可选

Question

我正在使用select2插件，我需要使用传输功能来自己执行ajax请求，因为我需要在请求 header 中设置API key 。但是，一旦我这样做， select2 就会正确响应结果，并按照我想要的方式格式化和显示它，但显示的结果不可选择。我既无法单击它们，也无法使用箭头键导航到它们，当我用鼠标经过它们时也没有任何鼠标悬停效果。

这是一些代码(我想显示用户名的建议):

ajax: {
    data: function (term, page) {
        return {
            Searchtext: term
        };
    },

    transport: function(queryParams){
        // Api.Ajax delivers { Ajax: *the $.ajax object*, RequestId: *some requestId* }
        var req = Api.Ajax("/api/suggestion/share/" + queryParams.data.Searchtext, "POST", { UserOnly: true }, queryParams.success);

        return req.Ajax;
    },

    // parse the results into the format expected by Select2.
    results: function(resp, page) {
        return {
            results:    resp.Data,
            more:       false
        };
    }
},

就像我说的，只要我通过实现传输功能来使用自己的 Ajax 功能，下拉列表中的结果就会全部显示，但不可选择。

这是一个错误，还是我做错了什么？

Answer 1

@thnew This Answer将向您展示如何在不需要传输功能的情况下设置请求 header 。