How to add a plugin for Mention a user in editor like Facebook mention

Hi guys,

I'm using 4.4.4 and want to implement a plugin for Mention a user in the CKEditor , until now I reached this

The Ajax Request is taken from Jquery UI sample to have live data,

My Acheivements

 1 - I get the @ and send a request

 2 - I isert a simple Input in the cursor position of CKEditor

BUG

 1 - I cannot get the Inserted Input to use it as a trigger of Autocomplete

 2 - The Input inserted before @ // it should be after the @

How can I get it to work? Where am I wrong? why is the textbox inaccessible, and how can I use it as a trigger?

CKEDITOR.plugins.add('mention',
    {
        init : function( editor )
        {
            editor.on( 'contentDom', function()
            {
 
                editor.on('key', function (event) {
                    if (event.data.keyCode == 2228274) {
                        var dummyElement = editor.document.createElement('span',
                            {
                                attributes:
                                {
                                    Class: 'fake-mention-autocomplete',
                                    id: 'mention-autocomplete',
                                }
                            });
 
                        editor.insertElement(dummyElement);
 
                        var mentionBox = new CKEDITOR.dom.element(document.getElementById('mention-autocomplete'));
 
                        $(mentionBox).autocomplete({
                            source: function (request, response) {
                                $.ajax({
                                    url: "http://gd.geobytes.com/AutoCompleteCity",
                                    dataType: "jsonp",
                                    data: {
                                        q: request.term
                                    },
                                    success: function (data) {
                                        response(data);
                                    }
                                });
                            },
                            minLength: 3,
                            select: function (event, ui) {
                                log(ui.item ?
                                  "Selected: " + ui.item.label :
                                  "Nothing selected, input was " + this.value);
                            },
                            open: function () {
                                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
                            },
                            close: function () {
                                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
                            }
                        });
                    }
                });
            })
        }
    });