feat(recentSearches): add remove button

algolia · Sep 24, 2020 · 8de6db3 · 8de6db3
1 parent 858637e
commit 8de6db3
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 10 deletions.
diff --git 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<Hit<QuerySuggestionHit>>({
   container: '#autocomplete',
   debug: true,
+  openOnFocus: true,
   // dropdownPlacement: 'start',
+  plugins: [recentSearches],
   getSources({ query }) {
     return getAlgoliaHits<QuerySuggestionHit>({
       searchClient,
@@ -27,6 +32,7 @@ autocomplete<Hit<QuerySuggestionHit>>({
           query,
           params: {
             hitsPerPage: 10,
+            facetFilters: [...recentSearches.data.getFacetFilters()],
           },
         },
       ],

diff --git 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
@@ -50,19 +50,36 @@ export function createRecentSearchesPlugin({
             return store.getAll();
           },
           templates: {
-            item({ item }) {
-              return `
-                <div class="autocomplete-item">
-                  <div>
-                    <svg viewBox="0 0 22 22" width="16" height="16" fill="currentColor">
-                      <path d="M0 0h24v24H0z" fill="none"/>
-                      <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
-                    </svg>
+            item({ item, root }) {
+              const div = document.createElement('div');
+              div.className = 'autocomplete-item';
+              div.innerHTML = `
+                <div>
+                  <svg viewBox="0 0 22 22" width="16" height="16" fill="currentColor">
+                    <path d="M0 0h24v24H0z" fill="none"/>
+                    <path d="M13 3c-4.97 0-9 4.03-9 9H1l3.89 3.89.07.14L9 12H6c0-3.87 3.13-7 7-7s7 3.13 7 7-3.13 7-7 7c-1.93 0-3.68-.79-4.94-2.06l-1.42 1.42C8.27 19.99 10.51 21 13 21c4.97 0 9-4.03 9-9s-4.03-9-9-9zm-1 5v5l4.28 2.54.72-1.21-3.5-2.08V8H12z"/>
+                  </svg>
 
-                    <span>${item.query}</span>
-                  </div>
+                  <span>${item.query}</span>
+                </div>
+                <div>
+                  <button type="button" class="autocomplete-recent-search-delete">X</button>
                 </div>
               `;
+              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;
             },
           },
         },