gatilho especial de preenchimento automático jquery

Eu tenho o seguinte problema:

devo fazer um preenchimento automático especial com o jquery acionado por char "@"

o problema é que, se eu começar a caixa de texto com @, ele funciona, mas se eu inserir @ depois de escrever alguns caracteres, não funcionará.

como deve funcionar: -i escrevo algum texto e quero adicionar alguém de "utilizatoriJson", -para adicionar alguém de "utilizatoriJson", devo pressionar a tecla @ e um menu suspenso de preenchimento automático deve aparecer, -após selecionar alguém no menu suspenso ou eu digito um rótulo completo no menu suspenso, ele deve colocar espaço e deixe-me continuar minha mensagem

como posso fazer isso ?

código que eu escrevi:

var utilizatoriJson = <%=utilizatoriJson%>;

$( '#textarea_mesaj_colaborare').autocomplete({
    source: utilizatoriJson

})            .autocomplete( "instance" )._renderItem = function( ul, item ) {
    return $( "<li>" )
            .append( "<a>" + item.label + "</a>" )
            .appendTo( ul );
}
$( '#textarea_mesaj_colaborare').autocomplete("disable");


$('#textarea_mesaj_colaborare').keyup(function(){
    if ($('#textarea_mesaj_colaborare').val()[$('#textarea_mesaj_colaborare').val().length-1]==='@'){
        var inceput = $('#textarea_mesaj_colaborare').val().length;

        $( '#textarea_mesaj_colaborare').autocomplete("enable");
    }

});

questionAnswers(2)

yourAnswerToTheQuestion