javascript之如何使 Ckeditor richcombo 像 html datalist 正常搜索一样可搜索

我正在使用 CKEDITOR 中的丰富组合创建自定义下拉菜单。

我想在其中添加搜索功能，例如按键搜索或输入文本框搜索。

我的投递箱看起来像这样。

请您参考如下方法:

这里我没有任何默认方法，这就是我这样做的原因，它运行良好。

editor.ui.addRichCombo( 'richcombo',{ 
     init : function(){ 
                   this.startGroup(""); 
                   this.add('search', '<div onmouseover="parent.comboSearch(this);" onclick="parent.nemsComboSearch(this);"><input class="cke_search" placeholder="Search"/></div>', ''); 
 
                    this.add(styles[i].name,styles[i].name,styles[i].element); 
                }, 
}); 

我在这里添加组合搜索

window.comboSearch= function(element) { 
   var anchorID = $(element).closest('a').attr("id"); 
   var liDom = $(element).closest('li'); 
   liDom.empty().append('<div id="' + anchorID + '" style="padding:4px 5px;"><input class="cke_search" placeholder="Search" /></div>'); 
   liDom.find('input').off("keyup").on("keyup", function() {  
       var data = this.value; 
       //create a jquery object of the rows 
       var jo = liDom.siblings('li'); 
       data = data.toUpperCase(); 
       var len = jo.length; 
       for(var i=0;i<len;i++){ 
           if(jo[i].textContent.toUpperCase().indexOf(data)){ 
               jo[i].hidden = true; 
           }else{ 
               jo[i].hidden = false; 
           } 
       } 
   }).focus(function() { 
       this.value = ""; 
       $(this).unbind('focus'); 
   }); 
}; 
 
function filter(data, jo) { 
   if (this.value === "") { 
       jo.show(); 
       return; 
   } 
   //hide all the rows 
   jo.hide(); 
 
   //Recusively filter the jquery object to get results. 
   jo.filter(function(i, v) { 
       var $t = $(this); 
       if ($t.is(":icontains('" + data + "')")) { 
           return true; 
       } 
       return false; 
   }).show(); 
} 

工作正常。