diff --git a/app/assets/javascripts/sitewide/atwho_users.js b/app/assets/javascripts/sitewide/atwho_users.js
index 29249b3b1..941a65023 100644
--- a/app/assets/javascripts/sitewide/atwho_users.js
+++ b/app/assets/javascripts/sitewide/atwho_users.js
@@ -10,6 +10,23 @@
         .atwho({
           at: '@',
           callbacks: {
+            matcher: function(flag, subtext, should_startWithSpace, acceptSpaceBar) {
+              var _a, _y, match, regexp, space;
+              flag = flag.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, "\\$&");
+              if (should_startWithSpace) {
+                flag = '(?:^|\\s)' + flag;
+              }
+              _a = decodeURI("%C3%80");
+              _y = decodeURI("%C3%BF");
+              space = ' \xa0'; // Use space...
+              regexp = new RegExp(flag + "([A-Za-z" + _a + "-" + _y + "0-9_" + space + "\'\.\+\-]*)$|" + flag + "([^\\x00-\\xff]*)$", 'gi');
+              match = regexp.exec(subtext);
+              if (match) {
+                return match[2] || match[1]
+              } else {
+                return null;
+              }
+            },
             remoteFilter: function(query, callback) {
               $.getJSON(
                 '/organizations/1/atwho_users.json',
@@ -19,21 +36,28 @@
                 }
               );
             },
+            sorter: function(query, items, _searchKey) {
+              // Sorting is already done on server-side
+              return items;
+            },
             tplEval: function(_tpl, map) {
               var res;
               try {
                 res = '';
-                res += '<li class="atwho-li atwho-li-user">';
-                res += '<img src="' + map.img_url + '" height="20" width="20" />';
-                res += '&nbsp;';
-                res += '<span data-full-name>';
+                res += '<li class="atwho-li atwho-li-user" ';
+                res += 'data-id="' + map.id + '" ';
+                res += 'data-full-name="' + map.full_name + '">';
+                res += '<img src="' + map.img_url + '" class="avatar" />';
+                res += '<span data-val="full-name">';
                 res += map.full_name;
                 res += '</span>';
+                res += '<small>';
                 res += '&nbsp;';
-                res += '<i class="fa fa-circle" aria-hidden="true"></i>';
+                res += '&#183;';
                 res += '&nbsp;';
-                res += '<small data-email>';
+                res += '<span data-val="email">';
                 res += map.email;
+                res += '</span>';
                 res += '</small>';
                 res += '</li>';
               } catch (_error) {
@@ -42,30 +66,39 @@
               return res;
             },
             highlighter: function(li, query) {
+              if (!query) {
+                return li;
+              }
+
               var li2 = $(li);
-              li2.addClass('highlighted');
+              var re = new RegExp(query, 'gi');
               var prevVal =
                 li2
-                .find('[data-full-name]')
+                .find('[data-val=full-name]')
                 .html();
               var newVal =
                 prevVal
-                .replace(query, '<strong>' + query + '</strong>');
-              li2.find('[data-full-name]').html(newVal);
+                .replace(re, '<strong>$&</strong>');
+              li2.find('[data-val=full-name]').html(newVal);
               prevVal =
                 li2
-                .find('[data-email]')
+                .find('[data-val=email]')
                 .html();
               newVal =
                 prevVal
-                .replace(query, '<strong>' + query + '</strong>');
-              li2.find('[data-email]').html(newVal);
-              return li2.html();
+                .replace(re, '<strong>$&</strong>');
+              li2.find('[data-val=email]').html(newVal);
+              return li2[0].outerHTML;
+            },
+            beforeInsert: function(value, li) {
+              var res = '';
+              res += '[@' + li.attr('data-full-name');
+              res += '~' + li.attr('data-id') + ']';
+              return res;
             }
           },
-          insertTpl: '[${atwho-at}${full_name}~${id}]',
           limit: 5,
-          startWithSpace: true
+          startsWithSpace: true
         });
       }
     });
diff --git a/app/controllers/at_who_controller.rb b/app/controllers/at_who_controller.rb
index 9602f749f..a93541890 100644
--- a/app/controllers/at_who_controller.rb
+++ b/app/controllers/at_who_controller.rb
@@ -10,8 +10,10 @@ class AtWhoController < ApplicationController
           .limit(Constants::ATWHO_SEARCH_LIMIT)
           .as_json
 
-    # Add avatars, convert to JSON
+    # Add avatars, Base62, convert to JSON
     res.each do |user_obj|
+      user_obj['full_name'] = user_obj['full_name'].truncate(Constants::NAME_TRUNCATION_LENGTH_DROPDOWN)
+      user_obj['id'] = user_obj['id'].base62_encode
       user_obj['img_url'] = avatar_path(user_obj['id'], :icon_small)
     end
 
diff --git a/app/models/organization.rb b/app/models/organization.rb
index 7efdf67a4..cdda44e70 100644
--- a/app/models/organization.rb
+++ b/app/models/organization.rb
@@ -62,8 +62,6 @@ class Organization < ActiveRecord::Base
                 .strip
                 .gsub('_', '\\_')
                 .gsub('%', '\\%')
-                .split(/\s+/)
-                .map { |t| '%' + t + '%' }
     else
       a_query = query
     end