How can we make the ckeditor rich combo searchable like normal html select box.

Question

Have created plugin to add tokens to ckeditor like the styles drop down, but they are not searchable like normal HTML selectbox. Is there an option to enable it?

Thanks in advance.

Answer 1

I could'nt find a configuration option to this but I found a workaround.

Inside ckeditor rich combo init function add a text input as first item and you treat it yourself

this.add('search', '<div onmouseover="parent.comboSearch(this);" onclick="parent.nemsComboSearch(this);"><input class="cke_search" placeholder="Search"/></div>', '');

than you need

       if(!jQuery.expr[':'].icontains){
             jQuery.expr[':'].icontains = function(a, i, m) {
                return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
            };
        }

        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');

                filter.call(this, data, jo);

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

NOTE I am using jquery in my example. I know it is a nasty workaround but i could'nt find any better solution and this here works. See screenshot below

Hope this helps See this link