Question

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

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

如果我无法添加搜索功能，如何禁用搜索框？如果我设置＆＃34; minimumResultsForSearch：-1＆＃34;，那么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的搜索选项。参见文档

MDN documentation

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

如果您使用的是远程数据，select2预计已经过滤了数据。

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

所以我认为，你不能以ajax选项使用这种方式。

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

<强>更新

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

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远程数据搜索

2 个答案: