使用select2：使用传输函数时，结果不可选

Question

我正在使用select2插件，我需要使用transport-function来自行执行ajax请求，因为我需要在request-header中设置API密钥。但是一旦我这样做，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将向您展示如何设置请求标头而无需传输功能。