jQuery Forum

Hello.

I have developed a system in PHP which processes #hashtags like on Twitter. Now I'm trying to build a system that will suggest tags as I type. When a user starts writing a tag, a drop-down list should appear beneath the textarea with other tags that begin with the same string.

Right now, I have it working where if a user types the hash key (#) the list will show up with the most popular #hashtags. When a tag is clicked, it is inserted at the end of the text in the textarea. I need the tag to be inserted at the cursor location instead. Here's my code; it operates on a textarea with class "facebook_status_text" and a div with class "fbssts_floating_suggestions" that contains an unordered list of links. (Also note that the syntax [#my tag] is used to handle tags with spaces.)

1.     maxlength = 140;
   
2.     var dest = $('.facebook_status_text:first');
3.     var fbssts_box = $('.fbssts_floating_suggestions');
4.     var fbssts_box_orig = fbssts_box.html();
5.     dest.keyup(function(fbss_key) {
6.       if (fbss_key.which == 51) {
7.         fbssts_box.html(fbssts_box_orig);
8.         $('.fbssts_floating_suggestions .fbssts_suggestions a').click(function() {
9.           var tag = $(this).html();
10.           if (tag.match(/W/)) {
11.             tag = '[#'+ tag +']';
12.           }
13.           else {
14.             tag = '#'+ tag;
15.           }
16.           var orig = dest.val();
17.           orig = orig.substring(0, orig.length - 1);
18.           var last = orig.substring(orig.length - 1);
19.           if (last == '[') {
20.             orig = orig.substring(0, orig.length - 1);
21.           }
22.           dest.val(orig + tag);
23.           fbssts_box.hide();
24.           dest.focus();
25.           return false;
26.         });
27.         fbssts_box.show();
28.         fbssts_box.css('left', dest.offset().left);
29.         fbssts_box.css('top', dest.offset().top + dest.outerHeight() + 1);
30.       }
31.       else if (fbss_key.which != 16) {
32.         fbssts_box.hide();
33.       }
34.     });
35.     dest.blur(function() {
36.       var t = setTimeout(function() { fbssts_box.hide(); }, 250);
37.     });
    

When the user types, I also need get the text in the textarea from the beginning to the cursor, and pass it (presumably via POST) to /fbssts/load/tags. The PHP back-end will process this, figure out what tags to suggest, and print the relevant HTML. Then I need to load that HTML into the .fbssts_floating_suggestions div at the cursor location.

Ideally, I'd like to be able to do this:

1. var newSuggestions = load('/fbssts/load/tags', {text: dest.getTextBeforeCursor()});
2. fbssts_box.html(fbssts_box_orig);
3. $('.fbssts_floating_suggestions .fbssts_suggestions a').click(function() {
4.   var tag = $(this).html();
5.   if (tag.match(/W/)) {
6.     tag = tag +']';
7.   }
   
8.   dest.insertAtCursor(tag);
9.   fbssts_box.hide();
10.   dest.focus();
11.   return false;
12. });

And here's the regex I'm using to identify tags (and @mentions), FWIW.

1. %(A(#|@)(w|(p{L}p{M}?))+)|((?<=s)(#|@)(w|(p{L}p{M}?))+)|([(#|@).+?])%u

Right now, my main hold-up is dealing with the cursor location. I've researched for the last two hours, and just ended up more confused. It appears that cursor location is not dealt with in the same way across browsers, and potential solutions that I have found are difficult to adjust to jQuery. The code that I end up with will be published under the GPL 2, so if I have to use a plugin I would strongly prefer that it be a GPL one.

Thanks!

EDIT:

With help from people in #jquery on IRC, I arrived at this solution for the jQuery that matches the functions I was pining for above:

1. (function($){
2.   /**
3.    * Adapted from
4.    * http://alexking.org/blog/2003/06/02/inserting-at-the-cursor-using-javascript
5.    */
6.   $.fn.insertAtCursor = function (myValue) {
7.     return this.each(function() {
8.       //MSIE
9.       if (document.selection) {
10.         this.focus();
11.         sel = document.selection.createRange();
12.         sel.text = myValue;
13.         this.focus();
14.       }
15.       //Firefox etc.
16.       else if (this.selectionStart || this.selectionStart == '0') {
17.         var startPos = this.selectionStart;
18.         var endPos = this.selectionEnd;
19.         var scrollTop = this.scrollTop;
20.         this.value = this.value.substring(0, startPos)
21.           + myValue
22.           + this.value.substring(endPos, this.value.length);
23.         this.focus();
24.         this.selectionStart = startPos + myValue.length;
25.         this.selectionEnd = startPos + myValue.length;
26.         this.scrollTop = scrollTop;
27.       }
28.       else {
29.         this.value += myValue;
30.         this.focus();
31.       }
32.     });
33.   };
34.   /**
35.    * Inspired by http://plugins.jquery.com/project/jCaret
36.    */
37.   $.fn.textBeforeCursor=function(distanceBefore) {
38.     var t=this[0];
39.     if($.browser.msie){
40.       var range = document.selection.createRange();
41.       var stored_range = range.duplicate();
42.       stored_range.moveToElementText(t);
43.       stored_range.setEndPoint('EndToEnd', range);
44.       var e = stored_range.text.length - range.text.length;
45.       var s = e - distanceBefore;
46.     }
47.     else {
48.       var e = t.selectionStart, s = e - distanceBefore;
49.     }
50.     if (s < 0) {
51.       s = 0;
52.     }
53.     var te = t.value.substring(s, e);
54.     return {start: s, end: e, text: te}
55.   };
56. })(jQuery);

That should be good enough to get me where I want to go.