富文本框，如Facebook评论框

Question

I'm currently working on http://flickogram.com .

I need to put rich comment textbox like facebook has.

Currently, I've developed a jquery plugin and you can find its working on http://jsfiddle.net/mike_ivanenko/k6zH6/3/

You can use the plugin as following.

$(document).ready(function() {
    $('#ttt').richtextbox( {
            highlights: [
                {char:'#', class:'highlighted', markup: 'topic'},
                {char:'@', class:'highlighted', markup: 'people'}
            ]
            ,change:function(richtextfield, input) {
                $('#output').val(input.val());
            }
        }
    );
});

It works pretty well for putting topic by typing hash(#), but I can't find a way to deal with people's name by typing @.

My intention is as followings.

When user types @, drop-down box with search text field will be shown just below the current textbox and user can search for the name.

Then the result will be shown in the dropdown, and on clicking the item will be entered in the main text field. But it should be non-editable. Deleting by [Delete] or [Backspace] key is available.

Any suggestions?

Or please help me out this on github.com/mike-ivanenko/richtextbox

Thank you

Mike

Answer 1

you should check out html5's contenteditable feature

Edit: (fixed)

here's what you need http://jsfiddle.net/ZQSHT/2/

$('div').keyup(function(){
    var test = $(this).text();

if( test.indexOf('@') >= 0){
  // Found world
    alert('@');
    $('input').focus();
}
});
$('input').change(function(){
    alert( $('input').val() );
    $('div').append('<a href="http://www.mysite.com/profiles/#">@'+$('input').val()+'</a>');
});