Merge pull request #40 from whitespace-se/feat/searchasyoutype-filter

feat: Add `AlgoliaIndex/SearchAsYouType` filter
helsingborg-stad · May 17, 2024 · c819fad · c819fad
2 parents b51bd44 + 9fb2b6b
commit c819fad
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 4 deletions.
diff --git a/source/js/algolia-index-js-searchpage.js b/source/js/algolia-index-js-searchpage.js
@@ -33,14 +33,29 @@ document.addEventListener('DOMContentLoaded', function() {
 
   /* Searchbox */
   const renderSearchBox = (renderOptions, isFirstRender) => {
-    const { query, refine, clear, isSearchStalled, widgetParams } = renderOptions;
+    const { query, refine, clear, isSearchStalled, widgetParams: { searchAsYouType = true } = {} } = renderOptions;
     if (isFirstRender) {
       const searchInput = document.getElementById('input_searchboxfield');
       searchInput.value = algoliaSearchData.searchQuery;
       refine(algoliaSearchData.searchQuery);
-      searchInput.addEventListener('input', event => {
-        refine(event.target.value);
-      });
+      if (searchAsYouType) {
+        searchInput.addEventListener('input', event => {
+          refine(event.target.value);
+        });
+      } else {
+        // Detect Enter key press
+        searchInput.addEventListener('keypress', (event) =>  {
+          if (event.key === 'Enter') {
+            refine(event.target.value);
+          }
+        });
+        // Detect clear action (when input value changes to empty)
+        searchInput.addEventListener('input', (event) => {
+          if (event.target.value === '') {
+            refine(event.target.value);
+          }
+        });
+      }
     }
   };
   const customSearchBox = connectSearchBox(
@@ -65,6 +80,7 @@ document.addEventListener('DOMContentLoaded', function() {
         //Do search
         search(query);
       },
+      searchAsYouType: Boolean(algoliaSearchData.searchAsYouType),
 
     }),
 

diff --git a/source/php/App.php b/source/php/App.php
@@ -76,6 +76,7 @@ public function enqueueScripts()
             'applicationId' => \AlgoliaIndex\Helper\Options::applicationId(),
             'indexName' => \AlgoliaIndex\Helper\Options::indexName(),
             'searchQuery' => get_search_query(),
+            'searchAsYouType' => apply_filters('AlgoliaIndex/SearchAsYouType', true),
             'clientConfig' => apply_filters('AlgoliaIndex/ClientConfig', []),
         ]);