选择2 自动选择用于 AJAX 调用的项目

select2 automatically select item for ajax call

本文关键字：选择 调用 项目 AJAX 用于      更新时间：2023-09-26

有没有办法让 select2 控件在 ajax 响应包含额外数据时自动选择一个项目。

我想实现我的控制器以在 JsonResult 中将项目标记为精确马赫，然后选择 2 个控件自动选择它而不打开下拉菜单。

从用户预设：如果用户键入与控制器上的项目完全匹配的 select2 文本框字符串。例如，如果用户输入条形码和控制器方法，则找到该条形码。Select2 控件将立即选择该项，而无需打开下拉列表。

如果用户在查询中键入的查询不完全匹配，控制器将返回没有参数的项目列表，select2 将打开下拉列表以显示用户可能选择的项目。

要使用 AJAX 执行此操作，您需要将选定的选项添加到 select DOM 元素，然后在 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
  }
});

#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;
}
相关文章：