select2自動選擇ajax調用的項目

Question

當 ajax 響應包含額外數據時，有沒有辦法讓 select2 控件自動選擇一個項目。

我想實現我的控制器以在 JsonResult 中將項目標記為精確馬赫，然后選擇 2 控制自動選擇它而不打開下拉菜單。

從用戶 prespecitve：如果用戶輸入與控制器上的項目完全匹配的 select2 文本框字符串。 例如，如果用戶輸入條形碼和控制器方法，則找到該條形碼。 Select2 控件將立即選擇該項目，而無需打開下拉菜單。

如果用戶輸入不完全匹配的查詢，控制器將返回不帶參數的項目列表， select2 將打開下拉菜單以顯示用戶可能選擇的項目。

Answer 1

要使用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
  }
});

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;
}