<div id="editableDiv" contenteditable="true">
    I may tweet from @twitter in the near #future
    <ul id="suggestUL"></ul>
</div>

function getCaretPixelPos($node) {
    var offsetx = 0;
    var offsety = 0;

    var nodeLeft = 0,
    nodeTop = 0;
    if ($node) {
        nodeLeft = $node.offsetLeft;
        nodeTop = $node.offsetTop;
    }

    var pos = { left: 0, top: 0 };

    if (document.selection) {
        var range = document.selection.createRange();
        pos.left = range.offsetLeft + offsetx - nodeLeft + 'px';
        pos.top = range.offsetTop + offsety - nodeTop + 'px';
    } else if (window.getSelection) {
        var sel = window.getSelection();
        var range = sel.getRangeAt(0).cloneRange();
        try {
            range.setStart(range.startContainer, range.startOffset - 1);
        } catch (e) { }
        var rect = range.getBoundingClientRect();
        if (range.endOffset == 0 || range.toString() === '') {
            // first char of line
            if (range.startContainer == $node) {
                // empty div
                if (range.endOffset == 0) {
                    pos.top = '0px';
                    pos.left = '0px';
                } else {
                    // firefox need this
                    var range2 = range.cloneRange();
                    range2.setStart(range2.startContainer, 0);
                    var rect2 = range2.getBoundingClientRect();
                    pos.left = rect2.left + offsetx - nodeLeft + 'px';
                    pos.top = rect2.top + rect2.height + offsety - nodeTop + 'px';
                }
            } else {
                pos.top = range.startContainer.offsetTop + 'px';
                pos.left = range.startContainer.offsetLeft + 'px';
            }
        } else {
            pos.left = rect.left + rect.width + offsetx - nodeLeft + 'px';
            pos.top = rect.top + offsety - nodeTop + 'px';
        }
    }
    //console.log('pos left : ' + pos.left + ' pos top : ' + pos.top);
    //console.log($('#suggestUL'));
    $('#suggestUL').css('left', pos.left);
    $('#suggestUL').css('top', pos.top);
    //console.log('suggestUL left : ' + $('#suggestUL').css('left') + ' suggestUL top : ' + $('#suggestUL').css('top'));
};

var event = e || window.event;
    var keyCode = event.keyCode || event.which;
    if (keyCode == 35 || keyCode == 64)
        getCaretPixelPos($('#editableDiv')[0]);

var fetchData = false;
    var suggestionChar = '';
    $('#editableDiv').on('keypress',function(event){
         var keyCode = event.which || event.keyCode.
         var hashKey; // Set keyCode for #
         var atKey; // Set keycode for @
         var spaceKey //SpaceKey code
        if(keyCode == hashKey || keyCode == atKey){
            fetchData = true
            suggestionChar = '';
            return; //flag is set now look out for next key cod.
        }
       else if ( keyCode == spaceKey ){
           fetchData = false;
           suggestionChar = '';
        }
       if( fetchData){
           var data = String.fromCharCode(keyCode);
           suggestionChar = suggestionChar + data;
           // use "suggestionChar" for fetching the data from server.
           // fetch suggestions  from Server.
           // On success call back create the dynamic list of ul/li which will show the suggestion to user. You need to bind the user click event and/or keypress event for ul/li so that user can select the suggestion using mouse and keyboard along with 'Space' key.
        }
    })

$('textarea').on('click keyup', function isAt() {
    var idx = getCaret(this),
        text = $(this).val(),
        word = getWord(text, idx);
    $('p').html([
        '"', word, '" ', word.charAt(0) === '@'
        ? '<span style="color:blue">is prefixed</span>'
        : '<span style="color:red">is not prefixed</span>'
    ].join(''));
}).focus();

function getWord(s, i) {
    var r = /s/g;
    if (!i || r.test(s[i - 1])) return '';
    while (i && !r.test(s[--i])) {}
    r.lastIndex = i && ++i;
    return s.slice(i, (
        r.exec(s) || { index: s.length }
    ).index);
}

var str = '';
$('#editableDiv').keyup(function(e){
  if($(this).val() == '@' || $(this).val() == "#"){
    if(e.keyCode !=32){
      str += String.fromCharCode(e.keyCode);
    }
  }
});
alert(str);

var fetchSuggestions = false;
var suggestForString = '';
function fnShowSuggestionUL(e) {
    var event = e || window.event;
    var keyCode = event.keyCode || event.which;
    // KeyCode = 35 -> #
    // KeyCode = 64 -> @
    // KeyCode = 32 -> space
    // KeyCode = 13 -> Enter (Carriage Return)
    if (keyCode == 35 || keyCode == 64) {
        fetchSuggestions = true;
        suggestForString = '';
        $('#suggestUL').css('display', 'block');
        fnPositionSuggestUL();
    }
    else if (keyCode == 32 || keyCode == 13) {
        fetchSuggestions = false;
        suggestForString = '';
        $('#suggestUL').css('display', 'none');
        return;
    }
    if (fetchSuggestions == false)
        return;
    var data = String.fromCharCode(keyCode);
    suggestForString = suggestForString + data;
    // TODO: bring suggestions from database and append them as list items to "suggestUL"
}

function fnPositionSuggestUL() {
    var $node = $('#editableDiv')[0]
    var offsetx = 0;
    var offsety = 0;

    var nodeLeft = 0,
    nodeTop = 0;
    if ($node) {
        nodeLeft = $node.offsetLeft;
        nodeTop = $node.offsetTop;
    }

    var pos = { left: 0, top: 0 };

    if (document.selection) {
        var range = document.selection.createRange();
        pos.left = range.offsetLeft + offsetx - nodeLeft + 'px';
        pos.top = range.offsetTop + offsety - nodeTop + 'px';
    } else if (window.getSelection) {
        var sel = window.getSelection();
        var range = sel.getRangeAt(0).cloneRange();
        try {
            range.setStart(range.startContainer, range.startOffset - 1);
        } catch (e) { }
        var rect = range.getBoundingClientRect();
        if (range.endOffset == 0 || range.toString() === '') {
            // first char of line
            if (range.startContainer == $node) {
                // empty div
                if (range.endOffset == 0) {
                    pos.top = '0';
                    pos.left = '0';
                } else {
                    // firefox need this
                    var range2 = range.cloneRange();
                    range2.setStart(range2.startContainer, 0);
                    var rect2 = range2.getBoundingClientRect();
                    pos.left = rect2.left + offsetx - nodeLeft;
                    pos.top = rect2.top + rect2.height + offsety - nodeTop;
                }
            } else {
                pos.top = range.startContainer.offsetTop;
                pos.left = range.startContainer.offsetLeft;
            }
        } else {
            pos.left = rect.left + rect.width + offsetx - nodeLeft;
            pos.top = rect.top + offsety - nodeTop;
        }
    }
    //Create suggestUL if does not exist or destroyed
    fnCreateSuggestUL();

    $('#suggestUL').css('left', pos.left + 'px').css('top', (pos.top + 18)+'px');
};