Choices.js 远程数据源中禁用选项的显示问题解析

问题背景

在使用Choices.js这个强大的选择框库时，开发者经常需要通过远程API动态加载选项数据。一个常见的需求是：在展示从服务端获取的选项列表时，需要将某些选项标记为禁用状态（例如显示已停用的用户账号，但禁止用户选择）。然而，在Choices.js的某些版本中，当通过远程数据源动态加载选项时，直接将选项的disabled属性设置为true会导致该选项完全不可见，而不是显示为禁用状态。

问题现象

开发者在使用远程数据源动态加载选项时，按照常规方式设置选项的disabled属性：

results.push({
    value: user.id,
    label: user.firstname + ' ' + user.lastname,
    disabled: user.disabled
})

期望的行为是禁用的选项仍然显示在列表中，但不可选择（通常表现为灰色显示且不可点击）。然而实际效果却是这些禁用的选项完全不会出现在下拉列表中。

临时解决方案

在问题修复前，开发者尝试了以下临时解决方案：

1. 使用customProperties代替直接设置disabled属性：

results.push({
    value: user.id,
    label: user.firstname + ' ' + user.lastname,
    customProperties: {
        disabled: user.disabled
    }
})

2. 通过callbackOnCreateTemplates回调自定义模板，手动添加禁用样式类：

callbackOnCreateTemplates: template => ({
    ...template,
    item: (classNames, data) => {
        const disabledClass = data.customProperties?.disabled ? 'is-disabled' : '';
        return `
            <div class="${classNames.item} ${disabledClass}" data-item data-id="${data.id}" data-value="${data.value}" ${
            data.active ? 'data-active' : ''
            } ${data.disabled ? 'data-disabled' : ''}>
                ${data.label}
            </div>
        `;
    }
})

这种方案虽然能让禁用的选项显示为灰色，但选项仍然可以被选择和添加，无法真正实现禁用效果。

问题根源

这个问题的根本原因在于Choices.js在处理远程数据源返回的选项时，对于disabled属性的处理逻辑存在缺陷。当选项被标记为禁用时，库错误地将其从渲染流程中完全排除，而不是按照预期仅禁用其交互功能。

官方修复

Choices.js团队在后续版本中修复了这个问题。修复后的版本正确处理了远程数据源中带有disabled属性的选项，使其能够正常显示但保持不可选择状态。

修复后的实现确保了：

1. 禁用的选项会正常显示在下拉列表中
2. 禁用的选项会应用正确的禁用样式（通常是灰色显示）
3. 禁用的选项无法被点击或选择
4. 与本地数据源的行为保持一致

最佳实践建议

1. 版本选择：确保使用修复后的Choices.js版本（v11.0.3之后的版本）

2. 数据格式：当需要禁用某些选项时，直接在返回的数据中设置disabled属性：

{
    value: 'unique-id',
    label: 'Display Text',
    disabled: true  // 这将使选项显示但不可选择
}

3. 样式定制：如需自定义禁用选项的样式，可以通过CSS覆盖默认样式：

.choices__list--dropdown .choices__item--disabled {
    color: #999;
    cursor: not-allowed;
    /* 其他自定义样式 */
}

4. 远程加载优化：考虑在搜索时添加去抖（debounce）逻辑，避免频繁请求API

总结

Choices.js作为一款功能丰富的选择框库，在处理复杂场景如远程数据加载和选项状态管理时可能会遇到一些边界情况。通过理解其内部工作原理和及时更新到修复版本，开发者可以充分利用其强大的功能，构建出既美观又实用的选择交互界面。对于需要显示但禁用某些选项的场景，现在可以放心地使用disabled属性来实现预期的效果。