diff --git a/examples/js/app.ts b/examples/js/app.ts index af30a0dee..eec289a82 100644 --- a/examples/js/app.ts +++ b/examples/js/app.ts @@ -6,6 +6,7 @@ import { getAlgoliaHits, reverseHighlightItem, } from '@algolia/autocomplete-js'; +import { createRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches'; const searchClient = algoliasearch( 'latency', @@ -14,10 +15,14 @@ const searchClient = algoliasearch( type QuerySuggestionHit = { query: string }; +const recentSearches = createRecentSearchesPlugin({ key: 'recent' }); + autocomplete>({ container: '#autocomplete', debug: true, + openOnFocus: true, // dropdownPlacement: 'start', + plugins: [recentSearches], getSources({ query }) { return getAlgoliaHits({ searchClient, @@ -27,6 +32,7 @@ autocomplete>({ query, params: { hitsPerPage: 10, + facetFilters: [...recentSearches.data.getFacetFilters()], }, }, ], diff --git a/examples/js/package.json b/examples/js/package.json index 5221ca57d..fb0cab2c4 100644 --- a/examples/js/package.json +++ b/examples/js/package.json @@ -11,6 +11,7 @@ }, "dependencies": { "@algolia/autocomplete-js": "^1.0.0-alpha.30", + "@algolia/autocomplete-plugin-recent-searches": "^1.0.0-alpha.28", "@algolia/client-search": "4.5.1", "algoliasearch": "4.5.1" }, diff --git a/packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts b/packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts index 5aa93c873..65a37b315 100644 --- a/packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts +++ b/packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts @@ -50,19 +50,36 @@ export function createRecentSearchesPlugin({ return store.getAll(); }, templates: { - item({ item }) { - return ` -
-
- - - - + item({ item, root }) { + const div = document.createElement('div'); + div.className = 'autocomplete-item'; + div.innerHTML = ` +
+ + + + - ${item.query} -
+ ${item.query} +
+
+
`; + root.appendChild(div); + div.addEventListener('click', (event: MouseEvent) => { + if ( + event!.target && + (event!.target as HTMLElement).classList.contains( + 'autocomplete-recent-search-delete' + ) + ) { + event.stopPropagation(); + store.remove(item); + // FIXME: how to refresh only this plugin without having to refresh all the other sources? + } + }); + return null; }, }, },