使用selectize.js如何让输入框与下拉选项列表宽度保持一致

解决方案 #

你可以通过Selectize初始化的事件回调配合少量CSS实现输入框与下拉列表宽度自动同步，具体修改如下：

1. 保留原有CSS的基础上补充适配规则

/* 原有规则保留 */
.selectize-dropdown {
    width: auto !important;
    min-width: 120px; /* 可选：设置最小宽度避免选项过短导致控件太窄 */
}
/* 新增规则，适配控件宽度自适应基础属性 */
.selectize-control {
    width: fit-content !important;
}

2. 修改Selectize初始化代码，增加宽度同步逻辑

$(document).ready(function(){
    $('.selectize').selectize({
        // 初始化完成时同步一次宽度
        onInitialize: function() {
            setTimeout(() => {
                const dropdownWidth = this.$dropdown.outerWidth();
                this.$control.closest('.selectize-control').css('width', dropdownWidth + 'px');
            }, 0)
        },
        // 每次下拉框打开时重新同步宽度（适配选项动态变更的场景）
        onDropdownOpen: function() {
            const dropdownWidth = this.$dropdown.outerWidth();
            this.$control.closest('.selectize-control').css('width', dropdownWidth + 'px');
        }
    });
});

注意事项 #

• 不要给Selectize控件的父容器设置固定宽度，否则会覆盖自适应的宽度规则
• 如果你的选项是后续动态新增的，在新增选项完成后手动调用一次宽度同步逻辑即可

内容的提问来源于stack exchange，提问作者Santiago Ordax