title: tagging user with @
body: <p>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. </p>
  
  <p>So I put the @ sign in the div box enter a name, select it, and then its inserted in to the content area </p>
  
  <pre><code>&lt;div cols="40" rows="5" name="newmsg" id="newmsg" placeholder="Say something &lt;? echo $data['first']; ?&gt;..." contenteditable="true"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>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. </p>
  
  <p>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. </p>
  
  <p>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.</p>
  
  <p>JS:</p>
  
  <pre><code>$(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 &gt; 0) {
              $("#msgbox").slideDown('show');
              $("#msgbox").html('&lt;img src="load.gif" /&gt;');
              //if @abc avalable
              if (name.length &gt; 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 = "&lt;a contenteditable='false' href='#'&gt;" + username + "&lt;/a&gt;";
          $("#newmsg").append(E);
          $("#msgbox").hide();
  
          INSERT AJAX HERE TO SEND CONTENT TO DATABASE, REMOVED AS NOT NEEDED.
  
      });
  });
  </code></pre>