用@标记用户

Question

I'm currently building a @user tagging system. I have almost got it working with one little thing I can't get my head around. I know what the problem is, just can't think how I could rectify it.

So I put the @ sign in the div box enter a name, select it, and then its inserted in to the content area

<div cols="40" rows="5" name="newmsg" id="newmsg" placeholder="Say something <? echo $data['first']; ?>..." contenteditable="true"></div>

That all works fine. But after the name has inserted and I want to type it doesn't type straight away until I click on the div again and on every click of any key it searches and the msgbox with data shows content.

1.How could I stop the msgbox showing if the div already has a .addname selected and inputed. 2.And how can I change my code to not make it search after every key press.

I really don't know how facebook does it. All I know is they use a textarea and once you've inserted a name you can type normally straight away after that tagged person/s.

JS:

$(document).ready(function () {
    var start = /@/ig; // @ Match
    var word = /@(\w+)/ig; //@abc Match
    $("#newmsg").on("keyup", function () {
        var content = $(this).text(); //Content Box Data
        var go = content.match(start); //Content Matching @
        var name = content.match(word); //Content Matching @abc
        var dataString = 'searchword=' + name;
        //If @ available
        if (go.length > 0) {
            $("#msgbox").slideDown('show');
            $("#msgbox").html('<img src="load.gif" />');
            //if @abc avalable
            if (name.length > 0) {
                $.ajax({
                    type: "POST",
                    url: "textareausernameinsert.php", // Database name search 
                    data: dataString,
                    cache: false,
                    success: function (data) {
                        $("#msgbox").hide();
                        $("#msgbox").html(data).show();
                    }
                });
            }
        }
        return false;
    });

    //Adding result name to content box.
    $(".addname").live("click", function () {
        var username = $(this).attr('title');
        var old = $("#newmsg").html();
        var content = old.replace(word, "@"); //replacing @abc to (" ") space
        $("#newmsg").html(content);
        var E = "<a contenteditable='false' href='#'>" + username + "</a>";
        $("#newmsg").append(E);
        $("#msgbox").hide();

        INSERT AJAX HERE TO SEND CONTENT TO DATABASE, REMOVED AS NOT NEEDED.

    });
});

Answer 1

1.How could I stop the msgbox showing if the div already has a .addname selected and inputed.

Try to find one, if not exists then show the box.

$("#newmsg").on("keyup", function () {
    if( $(this).find('.addname').length == 0 ) { ... }
}

---

2.And how can I change my code to not make it search after every key press.

For example you may unbind the keyup event when sending the ajax and rebind when ajax return the result or capture event every n-character.

---

I really don't know how facebook does it. All I know is they use a textarea and once you've inserted a name you can type normally straight away after that tagged person/s.

Facebook use fake div method. You can also create contenteditable div (example - write sth and press space)

---

But after the name has inserted and I want to type it doesn't type (...)

There you have an answer how to set caret position.