如何将select2输入动态调整为与所选选项相同的宽度？

Question

我正在使用一系列内联选择输入构建一个“自然语言”搜索表单，使用jQuery Select2进行样式设置。 Select2输入的宽度似乎设置为初始化时所选选项的宽度，这很好。我只是无法弄清楚如何更改所选选项时更新宽度。有任何想法吗？

非常感谢！

Answer 1

尝试将此添加到您的CSS文件：

.select2-container {
    width: 100% !important;
}

它用select2解决了我的调整大小问题

（编辑：我不使用占位符）

Answer 2

您可以使用窗口调整大小功能。

例：

// Fix select2 width
$(window).on('resize', function() {
    $('.form-group').each(function() {
        var formGroup = $(this),
            formgroupWidth = formGroup.outerWidth();

        formGroup.find('.select2-container').css('width', formgroupWidth);

    });
});

直播 - https://jsfiddle.net/Lwy6qnwy/

Answer 3

只需为网站做这样的事情

$(e).on("select2:closing", function(e) {
    if (e.hasOwnProperty('params') &&
        e.params.hasOwnProperty('args') && 
        e.params.args.hasOwnProperty('originalEvent') && 
        e.params.args.originalEvent.hasOwnProperty('target')) {
            var newWidth = $(e.params.args.originalEvent.target).width();
            var id = $(e.params.args.originalEvent.target).attr('id');
            var container = $("span[aria-labelledby=\""+id.split("-result")[0]+"-container"+"\"]");
            $(container).parents('span.select2').width(newWidth + 21);
    }
});

这可能不是万无一失的，并且与当前的API相关联。但它会在下拉列表关闭之前获取下拉列表中元素的宽度，然后将其应用于容器。

需要注意的是，您可能需要浮动下拉项以获得其实际大小。

.select2-results__option {
    float: left;
    clear: both;
}

Answer 4

$('.select2-search__field').attr('style','width:auto');

$('.select2-search__field[placeholder=""]').attr('style','width:10px');