使用ajax选择2 - 选择值

时间:2016-11-25 08:00:13

标签: javascript ajax jquery-ui select2 jquery-select2-4

我正在使用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控件(此传递)进行搜索时它停止工作但是当我尝试使用此函数时它不会从Select2控件运行ajax搜索查询(它打开搜索列表,显示输入的查询,但是不要烧ajax)。那么使用Select2 UI搜索会破坏这个功能呢?

1 个答案:

答案 0 :(得分:0)

在您的函数selectAssignments()中尝试触发change的{​​{1}}:

select2