diff --git a/source/js/algolia-index-js-searchpage.js b/source/js/algolia-index-js-searchpage.js index e71b92e..866d100 100644 --- 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 index dae2484..5ae8c7c 100644 --- 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', []), ]);