setting back the cursor/carat at the end of the appended string in div
<p>So to reproduce the issue, here's a fiddle to play around with: <a href="http://jsfiddle.net/QRgE9/1/" rel="nofollow">http://jsfiddle.net/QRgE9/1/</a></p>

<p>Type in the following string into the box: Hello @An</p>

<p>And then make a selection from the dropdown. </p>

<p>You can see that after you've made the selection the cursor is no where to be found and user have to click again on the div. How do I make it such that the cursor blinks (doesn't loses it's focus) after I made the selection? I know facebook can do this just fine.. so I think I am missing something. </p>

<p>Also the cursor is not always appended at the end of the string. If the case is I am inserting this in the middle of the string, then the cursor should start again at the middle of the string.</p>

<p>Here's the code that is triggered when the user made a selection:</p>

<pre><code>$(".display_box").live("mousedown",function(event) 
    {
        $("#friendsList").hide();
        selRange = saveSelection();
        var startOffset = selRange.startOffset;
        var endOffset = selRange.endOffset;

        var username = $(this).attr('title');
        var currentContent = $("#recommendTextArea").html();
        var E ="&lt;span contenteditable='false' title=\"" + username + "\"&gt;"+ username + "&lt;/span&gt; ";
        var newContent = currentContent.replace(word, E); //replacing @abc to users real name 
        $("#recommendTextArea").html(newContent);

        selRange.setStart($("#recommendTextArea")[0].childNodes[0], startOffset);
        selRange.setEnd($("#recommendTextArea")[0].childNodes[0], endOffset);
        restoreSelection(selRange);
        event.preventDefault();

    });
</code></pre>
