Pull request #53

podio · Jan 3, 2015 · b6bde71 · b6bde71
1 parent 210351c
commit b6bde71
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 3 deletions.
diff --git a/assets/examples.js b/assets/examples.js
@@ -18,7 +18,7 @@ $(function () {
 
       callback.call(this, data);
     },
-	allowRepeat: true
+	onCaret: true
   });
 
   $('.get-syntax-text').click(function() {

diff --git a/jquery.mentionsInput.js b/jquery.mentionsInput.js
@@ -21,6 +21,7 @@
     allowRepeat   : false, //Allow repeat mentions
     showAvatars   : true, //Show the avatars
     elastic       : true, //Grow the textarea automatically
+	onCaret       : false,
     classes       : { 
       autoCompleteItemActive : "active" //Classes to apply in each item
     },
@@ -221,6 +222,29 @@
     function getInputBoxValue() {
       return $.trim(elmInputBox.val());
     }
+
+	// This is taken straight from live (as of Sep 2012) GitHub code. The
+    // technique is known around the web. Just google it. Github's is quite
+    // succint though. NOTE: relies on selectionEnd, which as far as IE is concerned,
+    // it'll only work on 9+. Good news is nothing will happen if the browser
+    // doesn't support it.
+    function textareaSelectionPosition($el) {
+      var a, b, c, d, e, f, g, h, i, j, k;
+      if (!(i = $el[0])) return;
+      if (!$(i).is("textarea")) return;
+      if (i.selectionEnd == null) return;
+      g = {
+        position: "absolute",
+        overflow: "auto",
+        whiteSpace: "pre-wrap",
+        wordWrap: "break-word",
+        boxSizing: "content-box",
+        top: 0,
+        left: -9999
+      }, h = ["boxSizing", "fontFamily", "fontSize", "fontStyle", "fontVariant", "fontWeight", "height", "letterSpacing", "lineHeight", "paddingBottom", "paddingLeft", "paddingRight", "paddingTop", "textDecoration", "textIndent", "textTransform", "width", "word-spacing"];
+      for (j = 0, k = h.length; j < k; j++) e = h[j], g[e] = $(i).css(e);
+      return c = document.createElement("div"), $(c).css(g), $(i).after(c), b = document.createTextNode(i.value.substring(0, i.selectionEnd)), a = document.createTextNode(i.value.substring(i.selectionEnd)), d = document.createElement("span"), d.innerHTML = "&nbsp;", c.appendChild(b), c.appendChild(d), c.appendChild(a), c.scrollTop = i.scrollTop, f = $(d).position(), $(c).remove(), f
+    }
 
   //Scrolls back to the input after autocomplete if the window has scrolled past the input
     function scrollToInput() {
@@ -384,7 +408,7 @@
           'id'      : utils.htmlEncode(item.id),
           'display' : utils.htmlEncode(item.name),
           'type'    : utils.htmlEncode(item.type),
-          'content' : utils.highlightTerm(utils.htmlEncode((item.name)), query)
+          'content' : utils.highlightTerm(utils.htmlEncode((item.display ? item.display : item.name)), query)
         })).attr('data-uid', itemUid); //Inserts the new item to list
 
 		//If the index is 0
@@ -408,7 +432,10 @@
       });
 
       elmAutocompleteList.show(); //Shows the elmAutocompleteList div
-      elmDropDownList.show(); //Shows the elmDropDownList
+	  if (settings.onCaret) {
+		positionAutocomplete(elmAutocompleteList, elmInputBox);
+      }
+	  elmDropDownList.show(); //Shows the elmDropDownList
     }
 
 	//Search into data list passed as parameter
@@ -423,6 +450,14 @@
         hideAutoComplete(); //Hide the autocompletelist
       }
     }
+
+	function positionAutocomplete(elmAutocompleteList, elmInputBox) {
+      var position = textareaSelectionPosition(elmInputBox),
+          lineHeight = parseInt(elmInputBox.css('line-height'), 10) || 18;
+      elmAutocompleteList.css('width', '15em'); // Sort of a guess
+      elmAutocompleteList.css('left', position.left);
+      elmAutocompleteList.css('top', lineHeight + position.top);
+    }
 
 	//Resets the text area
     function resetInput() {