如何使 Ckeditor richcombo 像 html datalist 普通搜索一样可搜索

Question

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

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

我的 Drop Box 看起来像这样。

Answer 1

在这里，我没有任何默认方法，这就是为什么我这样做很好。

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();
}

它工作正常。