AEM Cloud Service - Replace Live Filtering with Button based in Omni Search

Adobe Experience Manager 2023.12.14697.20231215T125030Z-231200

In Omni Search, if the live filtering of search results based on each filter selection in left rail is a bit overwhelming, the following extension disables it and does a button based search. So check all filters and Click the Search button...

Demo | Package Install | Github

Create a clientlib /apps/eaem-assets-button-search/clientlibs/button-based-search with categories=[cq.gui.common.admin.searchpanel], dependencies=eaem.lodash and add the following code in /apps/eaem-assets-button-search/clientlibs/button-based-search/button-based-search.js

(function ($, $document) {
    const FOUNDATION_CONTENT_LOADED = "foundation-contentloaded",
        GRANITE_OMNI_SEARCH_CONTENT = ".granite-omnisearch-content",
        SEARCH_TOOL_BAR_SEL = ".search-scrollable",
        FOUNDATION_FORM_SEL = 'form.foundation-form';

    let initialized = false, liveFilteringHandler;

    $document.on(FOUNDATION_CONTENT_LOADED, GRANITE_OMNI_SEARCH_CONTENT, function(event){
        if(initialized){
            return;
        }

        initialized = true;

        liveFilteringHandler = getSubmitHandler();

        initPauseFiltering();

        const $searchButton = $(getSearchButton()).appendTo(SEARCH_TOOL_BAR_SEL);

        $searchButton.click(doSearch);
    });

    function initPauseFiltering(){
        const registry = $(window).adaptTo("foundation-registry");

        registry.register("foundation.form.submit", {
            selector: "*",
            handler: function(formEl) {
                return {
                    post: function() {
                        pauseLiveFiltering();
                    }
                };
            }
        });
    }

    function doSearch(){
        resumeLiveFiltering();

        $(FOUNDATION_FORM_SEL).submit();

        pauseLiveFiltering();
    }

    function resumeLiveFiltering(){
        $document.off('submit', FOUNDATION_FORM_SEL);
        $document.on('submit', FOUNDATION_FORM_SEL, liveFilteringHandler);
    }

    function pauseLiveFiltering(){
        $document.off('submit', FOUNDATION_FORM_SEL);
        $document.on('submit', FOUNDATION_FORM_SEL, function(e) { e.preventDefault() });
    }

    function getSubmitHandler(){
        const handlers = $._data(document, "events")["submit"];

        return _.reject(handlers, function(handler){
            return (handler.selector != FOUNDATION_FORM_SEL );
        })[0].handler;
    }

    function getSearchButton(){
        return '<div style="text-align: center; margin: 15px 0 10px 0"><button is="coral-button" icon="search" iconsize="S">' +
                'Search' +
            '</button></div>';
    }
})(jQuery, jQuery(document));