Select2 with ajax - 选择值的问题

Question

我使用 Select2 插件如下：

JS

function initAssignmentsAjax() {

        $("#assignments").empty();

        $( "#assignments" ).select2( {
            placeholder: "Select an assignment",
            allowClear: true,

            ajax: {
                url: "/Home/GetAssignments",
                dataType: 'json',
                delay: 250,
                data: function ( params ) {
                    return {
                        q: params.term, // search term
                        page: params.page
                    };
                },

                processResults: processAssignmentsResult,

                cache: true
            },
            escapeMarkup: function ( markup ) { return markup; }, // let our custom formatter work    TUTAJ WCHODZI PO assignmentsTemplateSelectionHandler
            minimumInputLength: 3, //1
            templateSelection: assignmentsTemplateSelectionHandler,
            templateResult: assignmentsTemplateResultHandler
        } )
    }

    function processAssignmentsResult(data, params) {

        var json = JSON.parse( data.Data );
        var x = $.map( json, function ( item ) {
            return {
                text: item.ProjectNumber + ' : ' + item.BatchName,
                children: item.ChildItems,
            };
        } )

        return { results: x };
    }

HTML

<select id="assignments" style="width: 500px;" ></select>

当我从 UI 输入值时，它工作正常 - 它将 Ajax 查询发送到控制器，最后呈现受控制的值。

我还添加了以下功能（基于How to programmatically inject search queries into Select2 v4?）以编程方式输入要搜索的值

function selectAssignments( term ) {

    $( "#assignments" ).empty();

    var assignmentElementControl = $( "#assignments" );

    assignmentElementControl.select2( 'open' );

    // Get the search box within the dropdown or the selection
    // Dropdown = single, Selection = multiple
    var $search = assignmentElementControl.data( 'select2' ).dropdown.$search || assignmentElementControl.data( 'select2' ).selection.$search;
    // This is undocumented and may change in the future

    $search.val( term );
    $search.trigger( 'keyup' );
}

当我重新加载页面并从浏览器控制台使用此功能（或将其绑定到 UI 中的某个按钮）时，它也可以正常工作。 但是当我第一次尝试通过键入 Select2 控件（此 pass）进行搜索时它停止工作，但是当我尝试使用此功能时，它不会从 Select2 控件运行 ajax 搜索查询（它打开搜索列表，显示输入的查询，但是不触发 ajax ）。那么如何使用 Select2 UI 搜索来破坏这个功能呢？

Answer 1

在您的函数selectAssignments() 中尝试触发change 的change：

$search.val( term );
$search.trigger( 'keyup' );
$search.trigger( 'change' ); //Here