Hide search button in filters

J jo.der.sant0s · 144 views · Updated 2 years ago

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.

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 · 51 lines

Discussion

Ask a question or share how you used this.

No comments yet — be the first.