diff --git a/package-lock.json b/package-lock.json
index 8b5f1139b..38a52e68f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -48,6 +48,7 @@
         "just-index": "^4.1.2",
         "just-map-values": "^3.2.0",
         "just-omit": "^2.2.0",
+        "match-sorter": "^6.3.1",
         "minimist": "^1.2.7",
         "ms": "^2.1.2",
         "natural-compare": "^1.2.2",
@@ -12561,6 +12562,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/match-sorter": {
+      "version": "6.3.1",
+      "resolved": "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz",
+      "integrity": "sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "remove-accents": "0.4.2"
+      }
+    },
     "node_modules/mathml-tag-names": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -15409,6 +15419,11 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remove-accents": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
+      "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA=="
+    },
     "node_modules/require-directory": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
diff --git a/package.json b/package.json
index 7b832e41d..d5a7f71c2 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "just-index": "^4.1.2",
     "just-map-values": "^3.2.0",
     "just-omit": "^2.2.0",
+    "match-sorter": "^6.3.1",
     "minimist": "^1.2.7",
     "ms": "^2.1.2",
     "natural-compare": "^1.2.2",
diff --git a/src/components/Chat/Input/index.jsx b/src/components/Chat/Input/index.jsx
index a5ad4402d..d56cf495e 100644
--- a/src/components/Chat/Input/index.jsx
+++ b/src/components/Chat/Input/index.jsx
@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { translate } from '@u-wave/react-translate';
 import AutoComplete, { Completion } from 'react-abstract-autocomplete';
+import { matchSorter } from 'match-sorter';
 import SuggestionsList from './SuggestionsList';
 import EmojiSuggestion from './EmojiSuggestion';
 import GroupSuggestion from './GroupSuggestion';
@@ -34,10 +35,8 @@ const renderSuggestions = (children) => (
 
 // User suggestions:
 const getUserCompletions = (value, { trigger, completions }) => {
-  const compare = value.substr(trigger.length).toLowerCase();
-  return completions.filter((user) => (
-    user.username.substr(0, compare.length).toLowerCase() === compare
-  ));
+  const compare = value.substr(trigger.length);
+  return matchSorter(completions, compare, { keys: ['username'] });
 };
 const getUserText = (user, { trigger }) => `${trigger}${user.username} `;
 const renderUser = (props) => <UserSuggestion {...props} />;
@@ -48,12 +47,12 @@ const renderGroup = (props) => <GroupSuggestion {...props} />;
 // Emoji suggestions:
 const getEmojiCompletions = (value, { trigger, completions }) => {
   const compare = value.substr(trigger.length).toLowerCase();
-  const results = completions.filter((emoji) => (
-    emoji.shortcode.substr(0, compare.length).toLowerCase() === compare
-  ));
+  const results = matchSorter(completions, compare, {
+    keys: ['shortcode'],
+    baseSort: (a, b) => a.rankedValue.length - b.rankedValue.length,
+  });
 
-  const uniqueResults = uniqBy(results, (emoji) => emoji.image);
-  return uniqueResults.sort((a, b) => a.shortcode.length - b.shortcode.length);
+  return uniqBy(results, (emoji) => emoji.image);
 };
 const getEmojiText = (value) => `:${value.shortcode}: `;
 const renderEmoji = (props) => <EmojiSuggestion {...props} />;