jQuery - Facebook 样式标记，带有字符串和隐藏字段正则表达式。 自动完成

Question

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 1

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/

Answer 2

As Henry Garle stated, you are unable to have more than one encoded tag at a time in hidden-field , (unless you paste text containing multiple tags in the status-field ), because the code needs to find tags in status-field in order to create encoded versions of them in hidden-field . Since it only preserves the values of the tags in status-field after doing this, the next time the code runs (which is after a keypress event), it treats said values as regular text, which it simply copies in to hidden-field , since it is not able to identify them as values of tags.

The fix is simple: since presumably only one tag can be created at a time, all you have to do is modify your code to solely target the first appearing tag in status-field . Since no other tags will be targeted, their encoded versions in hidden-field will be preserved.

Before you of implement that fix, however, you should consider maintaining an object for each tag that contains its value and positional data instead. Such an approach separates the internal and external representations of tags, allows tags to be located quicker, and provides greater flexibility in how tags are to be ultimately formatted.

Mentionator is an existing, robust solution which takes the approach in providing the functionality you are trying to recreate. Considering it is well-structured, easy to follow, and copiously commented, it should be of use to you as either out-of-the box solution or reference material to cite as you roll out your own. It is maintained by yours truly:).