How can I make Ckeditor richcombo searchable like html datalist normal search

Question

I'm creating a Custom Drop Down Menu using rich combo in CKEDITOR.

I want to add a Search functionality within it like key press search or input textbox search.

My Drop Box looks like this.

Answer 1

Here I don't have any default methods that's why i am doing like this it'wroking fine.

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

and I am adding combo search here

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

It' working fine.