Don't display aliases when prefix is matching both alias and tag name

assets/js/autocomplete.ts

@@ -8,7 +8,7 @@ import store from './utils/store';
 import { TermContext } from './query/lex';
 import { $$ } from './utils/dom';
 import {
-  formatLocalAutocompleteResult,
+  createLocalAutocompleteResultFormatter,
   fetchLocalAutocomplete,
   fetchSuggestions,
   SuggestionsPopup,
@@ -196,9 +196,11 @@ function listenAutocomplete() {
         originalTerm = `${inputField.value}`.toLowerCase();
       }
 
+      const matchedTerm = trimPrefixes(originalTerm);
+
       const suggestions = localAc
-        .matchPrefix(trimPrefixes(originalTerm), suggestionsCount)
-        .map(formatLocalAutocompleteResult);
+        .matchPrefix(matchedTerm, suggestionsCount)
+        .map(createLocalAutocompleteResultFormatter(matchedTerm));
 
       if (suggestions.length) {
         popup.renderSuggestions(suggestions).showForField(targetedInput);

assets/js/utils/__tests__/suggestions.spec.ts

@@ -2,7 +2,7 @@ import { fetchMock } from '../../../test/fetch-mock.ts';
 import {
   fetchLocalAutocomplete,
   fetchSuggestions,
-  formatLocalAutocompleteResult,
+  createLocalAutocompleteResultFormatter,
   purgeSuggestionsCache,
   SuggestionsPopup,
   TermSuggestion,
@@ -334,12 +334,13 @@ describe('Suggestions', () => {
     });
   });
 
-  describe('formatLocalAutocompleteResult', () => {
+  describe('createLocalAutocompleteResultFormatter', () => {
     it('should format suggested tags as tag name and the count', () => {
       const tagName = 'safe';
       const tagCount = getRandomIntBetween(5, 10);
 
-      const resultObject = formatLocalAutocompleteResult({
+      const formatter = createLocalAutocompleteResultFormatter();
+      const resultObject = formatter({
         name: tagName,
         aliasName: tagName,
         imageCount: tagCount,
@@ -354,7 +355,8 @@ describe('Suggestions', () => {
       const tagAlias = 'rating:safe';
       const tagCount = getRandomIntBetween(5, 10);
 
-      const resultObject = formatLocalAutocompleteResult({
+      const formatter = createLocalAutocompleteResultFormatter();
+      const resultObject = formatter({
         name: tagName,
         aliasName: tagAlias,
         imageCount: tagCount,
@@ -363,5 +365,39 @@ describe('Suggestions', () => {
       expect(resultObject.label).toBe(`${tagAlias} ⇒ ${tagName} (${tagCount})`);
       expect(resultObject.value).toBe(tagName);
     });
+
+    it('should not display aliases when tag is starting with the same matched', () => {
+      const tagName = 'chest fluff';
+      const tagAlias = 'chest floof';
+      const tagCount = getRandomIntBetween(5, 10);
+
+      const prefix = 'ch';
+
+      const formatter = createLocalAutocompleteResultFormatter(prefix);
+      const resultObject = formatter({
+        name: tagName,
+        aliasName: tagAlias,
+        imageCount: tagCount,
+      });
+
+      expect(resultObject.label).toBe(`${tagName} (${tagCount})`);
+    });
+
+    it('should display aliases if matched prefix is different from the tag name', () => {
+      const tagName = 'queen chrysalis';
+      const tagAlias = 'chrysalis';
+      const tagCount = getRandomIntBetween(5, 10);
+
+      const prefix = 'ch';
+
+      const formatter = createLocalAutocompleteResultFormatter(prefix);
+      const resultObject = formatter({
+        name: tagName,
+        aliasName: tagAlias,
+        imageCount: tagCount,
+      });
+
+      expect(resultObject.label).toBe(`${tagAlias} ⇒ ${tagName} (${tagCount})`);
+    });
   });
 });

assets/js/utils/suggestions.ts

@@ -176,15 +176,17 @@ export async function fetchLocalAutocomplete(): Promise<LocalAutocompleter> {
     .then(buf => new LocalAutocompleter(buf));
 }
 
-export function formatLocalAutocompleteResult(result: Result): TermSuggestion {
-  let tagName = result.name;
+export function createLocalAutocompleteResultFormatter(matchedPrefix?: string): (result: Result) => TermSuggestion {
+  return result => {
+    let tagName = result.name;
 
-  if (tagName !== result.aliasName) {
-    tagName = `${result.aliasName} ⇒ ${tagName}`;
-  }
+    if (tagName !== result.aliasName && (!matchedPrefix || !tagName.startsWith(matchedPrefix))) {
+      tagName = `${result.aliasName} ⇒ ${tagName}`;
+    }
 
-  return {
-    value: result.name,
-    label: `${tagName} (${result.imageCount})`,
+    return {
+      value: result.name,
+      label: `${tagName} (${result.imageCount})`,
+    };
   };
 }