select2 自动 select 项用于 ajax 调用

Question

当 ajax 响应包含额外数据时，有没有办法使 select2 控件自动 select 成为一个项目。

我想实现我的控制器以在 JsonResult 中将项目标记为精确的 mach，然后 select2 控制自动 select 无需打开下拉。

来自用户的看法：如果用户输入 select2 与控制器上的项目完全匹配的文本框字符串。例如如果用户输入条形码并且控制器方法找到该条形码。 Select2 控件将立即 select 该项目而不打开下拉列表。

如果用户输入的查询不完全匹配，控制器将 return 不带参数的项目列表 exact 并且 select2 将打开下拉列表以显示用户可能的项目选择。

Answer 1

要使用 AJAX 执行此操作，您需要向 select DOM 元素添加一个 selected 选项，然后触发对 select2 小部件，因此它会重绘。以下可能是您要查找的内容。此示例使用 processResults 检查是否只有一个匹配项并且它与用户键入的内容完全匹配。

$("#product_id").select2({
  ajax: {
    url: "/api/productLookup",
    dataType: 'json',
    data: function (params) {
      return {
        term: params.term,
        };
    },
    processResults: function (data) {
        var searchTerm = $("#product_id").data("select2").$dropdown.find("input").val();
        if (data.results.length == 1 && data.results[0].text == searchTerm) {
            $("#product_id").append($("<option />")
                .attr("value", data.results[0].id)
                .html(data.results[0].text)
            ).val(data.results[0].id).trigger("change").select2("close");
        }
        return data;
    },
    minimumInputLength: 8,
    cache: true
  }
});

Answer 2

#this worked for me... using select2 with barcode
var defaultInitialGroup = '';
    $("#idbarang").select2({
        placeholder: "Type/ Scan your barcode item",
        allowClear: true,
        minimumInputLength: 2,
        multiple: true,
        ajax: {
            url: HOST_URL + 'stock/balance/list_xxv',
            type: 'POST',
            dataType: 'json',
            delay: 250,
            data: function(params) {
            return {
            _search_: params.term, // search term
            _page_: params.page,
            _draw_: true,
            _start_: 1,
            _perpage_: 2,
            _paramglobal_: defaultInitialGroup,
            term: params.term,
            };
            },
            processResults: function (data, params) {
            var searchTerm = $("#idbarang").data("select2").$dropdown.find("input").val();
        if (data.items.length === 1 && data.items[0].text === searchTerm) {
        var option = new Option(data.items[0].nmbarang, data.items[0].idbarang, true, true);
        $('#idbarang').append(option).trigger('change').select2("close");
        // manually trigger the `select2:select` event
         $('#idbarang').trigger({
         type: 'select2:select',
         params: {
            data: data
        }
        });}
        params.page = params.page || 1;
        return {
        results: data.items,
            pagination: {
            more: (params.page * 30) < data.total_count
            }
            };
            },
            cache: false
        },
        escapeMarkup: function(markup) {
        return markup;
        }, // let our custom formatter work
        templateResult: formatItem, // omitted for brevity, see the source of this page
        templateSelection: formatItemSelection // omitted for brevity, see the source of this page
    })
function formatItem(repo) {
if (repo.loading) return repo.text;
var markup ="<div class='select2-result-repository__description'>" + repo.idbarang +"<i class='fa fa-circle-o'></i>"+ repo.nmbarang +"</div>";
return markup;
}
function formatItemSelection(repo){
return repo.nmbarang || repo.text;
}

select2 自动 select 项用于 ajax 调用

select2 automatically select item for ajax call

javascript

ajax

jquery-select2

jquery-select2-4