Hide search button in filters

Description/Instructions

The snippet will hide the search button, if nothing is selected in a specific dropdown. 

It will use the name of the filter option (visible name, not the slug).

As soon as something is selected, the search button will become active. 

Instructions

Use in HTML Widget or alternative create a separate.js and .css file.

<script>

document.addEventListener('DOMContentLoaded', function () {

    var fltrTxt = document.querySelector('.ts-filter-text');

    var srchBtn = document.querySelector('.ts-search-btn');

 

    if (fltrTxt && srchBtn) {

        var updtBtnState = () => {

            var isDsbl = fltrTxt.textContent.trim() === '[Filter Name]';

            srchBtn.disabled = isDsbl;

            srchBtn.classList.toggle('dsbl', isDsbl);

        };

 

        updtBtnState();

        new MutationObserver(updtBtnState).observe(fltrTxt, { childList: true, subtree: true });

    }

});

</script>

 

<style>

.ts-search-btn.dsbl {

    background-color: #d3d3d3;

    color: #a0a0a0;

    cursor: not-allowed;

    pointer-events: none;

}

</style>

  • JS
Copy Code

Let's Chat About this Snippet