检索到所有数据后，Select2 远程数据搜索

Question

select2 几乎可以按照我想要的方式工作。当另一个字段发生更改时，它会加载所有远程数据并正确格式化。我想在检索到的数据上添加回搜索功能，即一旦检索到数据，用户就可以按标题（result.title）搜索列表。

在下面的示例中，检索了数据，但没有过滤搜索词。在用户搜索结果之前首先加载所有远程数据非常重要。

如果我无法添加搜索功能，如何禁用搜索框？如果我设置“minimumResultsForSearch：-1”，select2 框仍然让我搜索？

    var $company2 = $(".company2");
    $company2.select2().on('change', function() {
        if ($company2.val() !== null) {
            $('.unmaintained2').select2({
                allowClear: true,
                minimumResultsForSearch: 1,
                ajax: {
                    url: "/api/unmaintained2/" + $company2.val(),
                    processResults: function (data) {
                        return {
                            results: data,
                        };
                    },
                    dataType: 'json',
                    cache: true,
                },
                escapeMarkup: function(m) {
                    return m;
                },
                templateResult: function (result) {
                    if (result.loading) return 'Loading...';
                    return result.text + '<h6>' + result.make + ' ' + result.category + '</h6>';
                },
            });
        };
    });

Answer 1

有一个名为matcher 的搜索选项。请参阅文档

https://select2.org/searching#customizing-how-results-are-matched

但这只能用于本地提供的数据。

如果您使用远程数据，select2 预计返回的数据已过滤。

matcher 仅适用于本地提供的数据（例如，通过数组！ 当使用远程数据集时，Select2 期望返回的 结果已在服务器端过滤。

所以我认为，您不能将这种方式与ajax 选项一起使用。

也许您可以在页面加载时加载数据，然后将返回的数据作为options 添加到选择框中。然后使用matcher 选项初始化select2 框。

更新：

我玩了一会儿，您可以在加载所有选项后格式化搜索结果。 检查此代码：

function formatState (state) {
  if (!state.id) {
    return state.text;
  }
  var state1 = state.text + '<h6>(' + state.id  + ') ' + state.text + '</h6>';
  return state1;
};

function selection(state) {
    return state.text;
}

function makeSelect2(data) {
    $('#selectBox').select2({
        data: data,
        templateSelection: selection,
        templateResult: formatState,
        escapeMarkup: function (state) {
            return state;
        },
    });
}

$(document).ready(function() {
    $.ajax({
        type: "POST",
        dataType: "json",
        async: true,
        url: "ajax.php",
        data: ({ 
        }),
        success: function (data) {
            makeSelect2(data);
        }
    });
});

在$(document).ready 上，选项通过ajax 加载。在成功获得ajax 的结果后，函数makeSelect2 将使用ajax 请求的结果调用。 在makeSelect2 函数中，select2 框使用给定数据初始化，使用templateSelection 和templateResult 选项，您可以修改搜索结果外观。

希望这是您的期望。

Answer 2

感谢@dns_nx 下面是最终解决方案！ select2 现在可以搜索（客户端）并且可以使用远程数据进行模板化！

$(document).ready(function() {
    var $company2 = $(".company2");
    var $equipment2 = $(".equipment2");
    $company2.select2().on('change', function() {
        $equipment2.empty();
        if ($company2.val() !== null) {
            $.ajax({
                url: "{{ url('/') }}" + "/api/unmaintained2/" + $company2.val(),
                type: 'GET',
                dataType: 'json',
                async: true,
                success: function(data) {
                    $equipment2.select2({
                        data: data,
                        templateSelection: function(result) {
                            return result.text;
                        },
                        templateResult: function(result) {
                            if (!result.id) {
                                return result.text;
                            }
                            var final = '<h2>'+ result.serial + '</h2><h5>(' + result.make  + ') ' + result.category + '</h5>';
                            return final;
                        },
                        escapeMarkup: function(result) {
                            return result;
                        },
                    });
                }
            });
        }
    }).trigger('change');
});