如何在 jquery-select2 中的排序函数中获取查询字符串或容器

Question

有什么方法可以获取查询字符串或我在排序器函数中附加 select2 的元素吗？我在页面上有多个下拉菜单，因此无法通过这种方式获取查询字符串：

$('.select2-search__field').val().toLowerCase()

我正在使用本地数据集，因此选项已经在下拉列表中。

$('.js-select').select2({
    sorter: select2Sorter
});

function select2Sorter(results) {
   ...
}

Answer 1

您问题的简单答案是 "no"。您不能从 sorter 函数

中引用任何 select2 内部函数

为什么会这样？

如果您查看 select2 来源，尤其是 result.js file, line 93，您会看到 sort 函数如下所示：

Results.prototype.sort = function (data) {
    var sorter = this.options.get('sorter');

    return sorter(data);
};

因此，它不会将任何上下文传播到传递的 sorter 函数，也不会提供更多参数。

解决方案

一种快速而肮脏的修复方法是覆盖 sort 函数以提供 this 上下文。这可以通过以下方式完成（假设您有 *.full.js 版本的 select2）：

$.fn.select2.amd.require('select2/results').prototype.sort = function (data) {
    var sorter = this.options.get("sorter");

    // pass the `this` context
    return sorter.call(this, data);
};

现在，每次调用 sorter 函数时，您都可以访问 select2 内部函数，并且可以做任何您想做的事情，例如

$('#e1').select2({
    sorter: function (data) {
        // get the search field of the current select2 element
        var $searchField = this.data.$element.data("select2")
            .$dropdown.find(".select2-search__field");

        // log it's value
        console.log($searchField.val());
        return data;
    }
});

这里有一个 JSFiddle 演示了这个概念。

如何在 jquery-select2 中的排序函数中获取查询字符串或容器

How to get query string or container in sorter function in jquery-select2

jquery-select2

为什么会这样？

解决方案