检索到所有数据后，选择 2 远程数据搜索

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 only works with locally supplied data (e.g., via an array! When a remote data set is used, Select2 expects that the returned results have already been filtered on the server side.

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

也许您可以在加载页面时加载数据，然后将返回的数据作为 options 添加到 select 框中。然后使用 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');
});

检索到所有数据后，选择 2 远程数据搜索

Select2 remote data search once all data retrieved

javascript

ajax

jquery-select2

jquery-select2-4