Nick Nick - 5 months ago 35
Javascript Question

jQuery - Facebook style tagging with string and hidden fields regex. Autocomplete

I would like to create a similar system to the facebook status update using jQuery.

If you take a look at the guts of it, just a few elements below the

What's on your mind?
textarea tag, there is a hidden field...

<input type="hidden" autocomplete="off" class="mentionsHidden" name="xhpc_message" value="">


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
@[uid:User Name]
in place of the users name, so that it can be turned into a hyperlink later on.

I have tried to recreate something similar myself, not with users, but with tags. http://jsfiddle.net/nickjackson/qh3QP/

When I type
#fun
into the first text area field, the second text area displays
#[tag:fun]
and the
#fun
tag becomes
fun
. 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?

Ultimately, How can I create a textarea and hidden field combo, that works similarly to the facebook status update, and allows the use of tags?

Answer

I used 3 fields - one to type in, one to store the tag stuff in, and one to display the text. The type-in field is invisible but on top of display field. It should be pretty self-explanatory, but ask any questions you may have - and no, I have no quick solution for there being no cursor.

http://jsfiddle.net/qh3QP/10/