jquery - Select2 jQuery 动画调整大小（使用 jsFiddle！）；我们可以以某种方式延迟默认事件或使其正确调整大小吗？

Question

我正在尝试更改 select2 元素的大小，但它似乎无法正常工作（下拉菜单的大小未正确调整）。我考虑并尝试过的一种方法是在 .open 上使用 preventDefault() ，但是如何在动画完成后甚至触发默认值？我还尝试隐藏然后显示 select2 下拉菜单，但似乎也无法使其正常工作。我有一个 jsFiddle，以及这里的代码，请帮助:)

jsFiddle： http: //jsfiddle.net/acpFh/2/ （如您所见，单击 select2 字段会调整顶部的大小，但不会调整下拉菜单）

代码：

$(function(){
    var $searchBox = $('#search_box');

    $searchBox.select2({
            width: '168px',
            minimumInputLength: 2,
            openOnEnter: false,
            closeOnSelect: true,
            placeHolder: 'Search',
            query: function (query) {
                var data = {results: []}, i, j, s;
                for (i = 1; i < 5; i++) {
                    s = "";
                    for (j = 0; j < i; j++) {s = s + query.term;}
                    data.results.push({id: query.term + i, text: s});
                }
                query.callback(data);
            }
    }).on('open',function(){ // <---- this stuff!!! ########################
        var $s2SearchBox = $('#s2id_search_box');
        $s2SearchBox.animate({
                left: -133,
                width: 300
            },
            function(){ // complete
                $s2SearchBox.width(300);

            });


    });


});​

干杯，并提前感谢您的帮助！

Answer 1

解决了！（感谢开发者“ivaynberg”本人）。

https://github.com/ivaynberg/select2/issues/469

http://jsfiddle.net/acpFh/6/

$(function(){
    var $searchBox = $('#search_box');

    $searchBox.select2({
            width: '168px',
            minimumInputLength: 2,
            openOnEnter: false,
            closeOnSelect: true,
            placeHolder: 'Search',
            query: function (query) {
                var data = {results: []}, i, j, s;
                for (i = 1; i < 5; i++) {
                    s = "";
                    for (j = 0; j < i; j++) {s = s + query.term;}
                    data.results.push({id: query.term + i, text: s});
                }
                query.callback(data);
            }
    }).on('open',function(){ // <---- this stuff!!! ########################
        var $s2SearchBox = $('#s2id_search_box');
        $s2SearchBox.animate({
                left: -133,
                width: 300
            },
            {step: function() {
                $searchBox.select2("positionDropdown");
              },
            complete: function() {
                $searchBox.select2("positionDropdown");
            }
             });


    });


});​