title: jQuery - Facebook style tagging with string and hidden fields regex. Autocomplete
body: <p>I would like to create a similar system to the facebook status update using jQuery.</p>
  
  <p>If you take a look at the guts of it, just a few elements below the <code>What's on your mind?</code> textarea tag, there is a hidden field...</p>
  
  <pre><code>&lt;input type="hidden" autocomplete="off" class="mentionsHidden" name="xhpc_message" value=""&gt;
  </code></pre>
  
  <p>As you type a status into the textarea field, the value of this hidden field changes to match the status. However, if you tag someone into the status, the hidden field displays something like <code>@[uid:User Name]</code> in place of the users name, so that it can be turned into a hyperlink later on.</p>
  
  <p>I have tried to recreate something similar myself, not with users, but with tags. <a href="http://jsfiddle.net/nickjackson/qh3QP/" rel="nofollow">http://jsfiddle.net/nickjackson/qh3QP/</a></p>
  
  <p>When I type <code>#fun</code> into the first text area field, the second text area displays <code>#[tag:fun]</code> and the <code>#fun</code> tag becomes <code>fun</code>. This is all correct.  However, when I then type something else, the square bracket disappears because the # tag is no longer in the status field.  How can I solve this?</p>
  
  <p>Ultimately, <strong>How can I create a textarea and hidden field combo, that works similarly to the facebook status update, and allows the use of tags?</strong></p>