Add autocompletion in textarea for user mentions

assets/css/src/dropdown.css

@@ -21,6 +21,7 @@ ul.dropdown-submenu-open {
     box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
 }
 
+.textarea-dropdown li,
 .dropdown-submenu-open li {
     display: block;
     margin: 0;
@@ -34,19 +35,25 @@ ul.dropdown-submenu-open {
     cursor: pointer;
 }
 
+.textarea-dropdown li:last-child,
 .dropdown-submenu-open li:last-child {
     border: none;
 }
 
+.textarea-dropdown .active,
+.textarea-dropdown li:hover,
 .dropdown-submenu-open li:hover {
     background: #4078C0;
     color: #fff;
 }
 
+.textarea-dropdown .active a,
+.textarea-dropdown li:hover a,
 .dropdown-submenu-open li:hover a {
     color: #fff;
 }
 
+.textarea-dropdown a,
 .dropdown-submenu-open a {
     text-decoration: none;
     color: #333;
@@ -59,3 +66,14 @@ ul.dropdown-submenu-open {
 .page-header .dropdown {
     padding-right: 10px;
 }
+
+/* textarea dropdown */
+.textarea-dropdown {
+    list-style: none;
+    margin: 3px 0 0 1px;
+    padding: 6px 0;
+    background-color: #fff;
+    border: 1px solid #b2b2b2;
+    border-radius: 3px;
+    box-shadow: 0px 1px 3px rgba(0,0,0,0.15);
+}

assets/js/src/Dropdown.js

@@ -40,6 +40,21 @@ Dropdown.prototype.listen = function() {
             $(this).find('a:visible')[0].click(); // Calling native click() not the jQuery one
         }
     });
+
+    // User mention autocomplete
+    $('textarea[data-mention-search-url]').textcomplete([{
+        match: /(^|\s)@(\w*)$/,
+        search: function (term, callback) {
+            var url = $('textarea[data-mention-search-url]').data('mention-search-url');
+            $.getJSON(url, { q: term })
+                .done(function (resp) { callback(resp); })
+                .fail(function ()     { callback([]);   });
+        },
+        replace: function (value) {
+            return '$1@' + value + ' ';
+        },
+        cache: true
+    }], {className: "textarea-dropdown"});
 };
 
 Dropdown.prototype.close = function() {