如何为CKEditor自定义RichCombo下拉菜单添加类HTML datalist搜索功能？

刚好我之前在项目里给CKEditor的RichCombo做过搜索功能，不管是输入框搜索还是按键快速定位都实现了，下面把具体步骤分享给你：

1. 给RichCombo添加搜索输入框 #

RichCombo默认没有搜索框，我们需要在它的下拉面板里插入一个输入元素。可以通过重写RichCombo的onRender方法来实现：

CKEDITOR.plugins.add('customRichCombo', {
    init: function(editor) {
        editor.ui.addRichCombo('customCombo', {
            label: '自定义下拉菜单',
            title: '自定义下拉菜单',
            className: 'cke_format',
            panel: {
                css: [CKEDITOR.skin.getPath('editor')].concat(editor.config.contentsCss),
                multiSelect: false,
                attributes: { 'aria-label': '自定义下拉菜单' }
            },
            onRender: function() {
                // 在下拉面板顶部添加搜索输入框
                var searchInput = document.createElement('input');
                searchInput.type = 'text';
                searchInput.placeholder = '搜索选项...';
                searchInput.style.width = '100%';
                searchInput.style.padding = '4px 8px';
                searchInput.style.boxSizing = 'border-box';
                searchInput.style.marginBottom = '8px';
                
                // 插入到面板容器的最前面
                this.panel.element.getFirst().insertBefore(searchInput, this.panel.element.getFirst().getChild(0));
                
                // 监听输入事件，实现过滤
                var self = this;
                searchInput.addEventListener('input', function(e) {
                    var searchTerm = e.target.value.toLowerCase();
                    var items = self.panel.element.find('.cke_panel_listItem');
                    
                    items.forEach(function(item) {
                        var itemText = item.getText().toLowerCase();
                        item.setVisible(itemText.includes(searchTerm));
                    });
                });
            },
            // 你的选项数据源
            items: [
                ['option1', '选项1'],
                ['option2', '选项2'],
                ['option3', '选项3'],
                // 更多选项...
            ],
            onClick: function(value) {
                editor.insertHtml(value);
            }
        });
    }
});

2. 实现按键快速搜索（类似浏览器下拉框的按键定位） #

除了输入框搜索，还可以支持用户按下字母键时自动定位到第一个匹配的选项。我们可以监听RichCombo面板的keydown事件：

// 在onRender方法里添加按键监听
this.panel.element.on('keydown', function(e) {
    var key = e.getKey();
    // 只处理字母和数字键
    if ((key >= 65 && key <= 90) || (key >= 48 && key <= 57)) {
        e.preventDefault();
        var searchChar = String.fromCharCode(key).toLowerCase();
        var items = self.panel.element.find('.cke_panel_listItem:visible');
        var matchedItem = null;
        
        items.forEach(function(item) {
            var itemText = item.getText().toLowerCase();
            if (itemText.startsWith(searchChar)) {
                matchedItem = item;
                return false; // 找到第一个匹配项就停止遍历
            }
        });
        
        if (matchedItem) {
            // 高亮选中匹配项
            items.forEach(function(item) {
                item.removeClass('cke_panel_listItem_selected');
            });
            matchedItem.addClass('cke_panel_listItem_selected');
            // 滚动到可视区域
            matchedItem.scrollIntoView({ block: 'nearest' });
        }
    }
});

3. 优化体验：类似datalist的实时匹配 #

如果想要更贴近HTML datalist的效果，比如输入时自动高亮匹配的字符，或者实时筛选并自动选中第一个匹配项，可以在输入事件里扩展逻辑：

// 修改之前的input事件监听
searchInput.addEventListener('input', function(e) {
    var searchTerm = e.target.value.toLowerCase();
    var items = self.panel.element.find('.cke_panel_listItem');
    var matchedItems = [];
    
    items.forEach(function(item) {
        var itemText = item.getText().toLowerCase();
        var isMatch = itemText.includes(searchTerm);
        item.setVisible(isMatch);
        if (isMatch) {
            matchedItems.push(item);
        }
    });
    
    // 如果有匹配项，自动选中第一个
    if (matchedItems.length > 0) {
        items.forEach(function(item) {
            item.removeClass('cke_panel_listItem_selected');
        });
        matchedItems[0].addClass('cke_panel_listItem_selected');
        matchedItems[0].scrollIntoView({ block: 'nearest' });
    }
});

4. 样式调整（可选） #

为了让搜索框和CKEditor的风格更统一，可以添加一些自定义CSS：

.cke_customCombo .cke_panel_frame input {
    border: 1px solid #ccc;
    border-radius: 3px;
    font-family: inherit;
    font-size: 13px;
}
.cke_customCombo .cke_panel_listItem_selected {
    background-color: #e1f0ff;
}

注意事项 #

• 确保你的CKEditor版本支持RichCombo的相关API（CKEditor 4.x是支持的，CKEditor 5的话组件结构不同，需要调整）
• 如果你的选项是动态加载的，记得在数据源更新后重新绑定搜索事件
• 可以根据需求调整匹配规则（比如模糊匹配、全词匹配等）

内容的提问来源于stack exchange，提问作者mariappan k