javascript - 一旦检索到所有数据，选择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 选项一起使用。

也许您可以在页面加载时加载数据，然后将返回的数据作为选项添加到选择框中。然后使用 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 结果成功后，将使用 ajax 请求的结果调用函数 makeSelect2。在 makeSelect2 函数中，select2 框使用给定数据并使用 templateSelection 和 templateResult 选项进行初始化，您可以修改搜索结果的外观。

希望这就是您所期望的。