diff --git a/assets/js/autocomplete.ts b/assets/js/autocomplete.ts index d940794c..c5ae754c 100644 --- a/assets/js/autocomplete.ts +++ b/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); diff --git a/assets/js/utils/__tests__/suggestions.spec.ts b/assets/js/utils/__tests__/suggestions.spec.ts index 29de9691..833915aa 100644 --- a/assets/js/utils/__tests__/suggestions.spec.ts +++ b/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})`); + }); }); }); diff --git a/assets/js/utils/suggestions.ts b/assets/js/utils/suggestions.ts index 099c9860..31d95a74 100644 --- a/assets/js/utils/suggestions.ts +++ b/assets/js/utils/suggestions.ts @@ -176,15 +176,17 @@ export async function fetchLocalAutocomplete(): Promise { .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})`, + }; }; }