Как сделать поиск по ИНН в каталоге Tilda

<script>
(function() {
    var checkInterval = setInterval(function() {
        if (window.tCatalogDict && window.tCatalogDict.searchplaceholder === "Поиск") {
            window.tCatalogDict.searchplaceholder = "Введите ИНН (от 10 до 12 символов)";
            
            clearInterval(checkInterval);

            var inputs = document.querySelectorAll('input[type="search"], .t-store__search-input, .t-catalog__search-input, [placeholder="Поиск"]');
            inputs.forEach(function(input) {
                input.placeholder = "Введите ИНН (от 10 до 12 символов)";
            });
        }
    }, 50);
    
    setTimeout(function() {
        clearInterval(checkInterval);
    }, 5000);
})();
</script>


<script>
(function() {
    'use strict';

    function initSearchBlock() {
        const searchBlock = document.querySelector('.uc-search-block');
        if (!searchBlock) return;

        const gridContList = searchBlock.querySelectorAll('.js-catalog-grid-cont');
        if (!gridContList.length) return;

        let inputEl = null;
        let searchBtn = null;
        let searchWrapper = null;
        let isInitialized = false;
        let searchAnimationInterval = null;
        let isSearching = false;

        function getElements() {
            if (!inputEl) {
                inputEl = searchBlock.querySelector('input.t-catalog__filter__input');
            }
            if (!searchBtn) {
                searchBtn = searchBlock.querySelector('.js-catalog-filter-search-btn');
            }
            if (!searchWrapper) {
                searchWrapper = searchBlock.querySelector('.t-catalog__search-wrapper');
            }
            return { input: inputEl, btn: searchBtn, wrapper: searchWrapper };
        }

        function updateButtonState() {
            const { input, btn } = getElements();
            if (!input || !btn) return;

            const val = input.value.trim();
            const len = val.length;

            if (len >= 10 && len <= 12) {
                btn.disabled = false;
                btn.classList.remove('t-btn_disabled');
                searchBlock.classList.remove('disable-search');
            } else {
                btn.disabled = true;
                btn.classList.add('t-btn_disabled');
                searchBlock.classList.add('disable-search');
            }
        }

        function startSearchAnimation() {
            const { wrapper } = getElements();
            if (!wrapper || isSearching) return;

            isSearching = true;
            let dotCount = 0;

            stopSearchAnimation();

            searchAnimationInterval = setInterval(function() {
                dotCount = (dotCount % 3) + 1; 
                const dots = '.'.repeat(dotCount);
                wrapper.setAttribute('data-search-text', 'Найти' + dots);
            }, 400); 
        }

        function stopSearchAnimation() {
            const { wrapper } = getElements();
            
            if (searchAnimationInterval) {
                clearInterval(searchAnimationInterval);
                searchAnimationInterval = null;
            }

            if (wrapper) {
                wrapper.setAttribute('data-search-text', 'Найти');
            }

            isSearching = false;
        }

        function setupInputValidation() {
            if (isInitialized) return;
            const { input, btn, wrapper } = getElements();
            if (!input || !btn) return;

            isInitialized = true;

            input.setAttribute('type', 'number');
            input.setAttribute('inputmode', 'numeric');
            input.setAttribute('pattern', '[0-9]*');

            if (wrapper) {
                wrapper.setAttribute('data-search-text', 'Найти');
            }

            btn.disabled = true;
            btn.classList.add('t-btn_disabled');
            searchBlock.classList.add('disable-search');

            btn.addEventListener('click', function(e) {
                const len = input.value.trim().length;
                if (len >= 10 && len <= 12) {
                    startSearchAnimation();
                }
            });

            input.addEventListener('keydown', function(e) {
                const allowedKeys = [
                    'Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown',
                    'Tab', 'Home', 'End', 'Insert', 'Escape'
                ];
                if (allowedKeys.indexOf(e.key) !== -1) return;

                if (e.key === 'Enter') {
                    const len = input.value.trim().length;
                    if (len < 10) {
                        e.preventDefault();
                        return false;
                    }
                    startSearchAnimation();
                    return;
                }

                if (e.ctrlKey || e.metaKey) return;

                if (!/^\d$/.test(e.key)) {
                    e.preventDefault();
                    return false;
                }

                const currentVal = input.value.trim();
                const selectionStart = input.selectionStart;
                const selectionEnd = input.selectionEnd;

                if (selectionStart !== selectionEnd) {
                    const newVal = currentVal.slice(0, selectionStart) + e.key + currentVal.slice(selectionEnd);
                    if (newVal.length > 12) {
                        e.preventDefault();
                        return false;
                    }
                    return;
                }

                if (currentVal.length >= 12) {
                    e.preventDefault();
                    return false;
                }
            });

            input.addEventListener('input', function() {
                let val = input.value;
                
                val = val.replace(/\D/g, '');
                
                if (val.length > 12) {
                    val = val.slice(0, 12);
                }
                
                if (input.value !== val) {
                    input.value = val;
                }

                updateButtonState();
            });

            input.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    const len = input.value.trim().length;
                    if (len < 10) {
                        e.preventDefault();
                        return false;
                    }
                }
            });
        }

        function checkAndShowResults() {
            const { input } = getElements();
            if (!input) return;

            const val = input.value.trim();
            const len = val.length;

            if (val !== '' && len >= 10 && len <= 12) {
                searchBlock.classList.add('show-search-results');
            } else {
                searchBlock.classList.remove('show-search-results');
            }
        }

        gridContList.forEach(function(el) {
            el.addEventListener('tStoreRendered', function(e) {
                setupInputValidation();
                checkAndShowResults();
                
                stopSearchAnimation();
            });
        });
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', initSearchBlock);
    } else {
        initSearchBlock();
    }
})();
</script>


<style>


.t-catalog__filter__reset.js-catalog-filter-reset:after {
    content: "Сбросить";
    font-size: 14px;
}

.t-catalog__filter__reset.js-catalog-filter-reset {
    font-size: 0;
}

.t-catalog__filter__sort {
    display: none;
}

svg.t-catalog__search-icon.js-catalog-filter-search-btn.t-btn_disabled {
    pointer-events: none;
}

.t-catalog__filter__controls-wrapper {
    gap: 0;
}


.uc-search-block .js-product.t-catalog__card {
    display: none !important;
}

.uc-search-block.show-search-results .js-product.t-catalog__card {
    display: flex !important;
}


.t-catalog__filter__chosen-val.js-catalog-filter-chosen-item {
    display: none;
}

.t-catalog__filter__reset.js-catalog-filter-reset {
    display: block;
}


.t-catalog__filter__search-and-sort.js-catalog-filter-search-and-sort {
    margin-left: 0;
    width: 100%;
    display: block !important;
}



.js-catalog-sort-mob-btn.t-catalog__filter__sort-mob-btn {
    display: none;
}

.js-catalog-search-mob-btn.t-catalog__filter__search-mob-btn {
    display: none;
}


.t-catalog__filter__search.t-descr {
    width: inherit;
}

input.t-catalog__filter__input.js-catalog-filter-search {
    width: auto;
    flex-grow: 1;
    height: 60px;
    color: #11101f;
    border: 1px solid #fcb42f;
    border-radius: 10px;
    font-size: 16px;
    line-height: 1.33;
    outline: none;
    padding: 0 20px;
    padding-left: 65px;
    background: transparent;
}

.t-catalog__search-wrapper {
    display: flex;
    gap: 15px;
}

.t-catalog__search-wrapper:before {
    content: "";
    background-image: url(https://static.tildacdn.com/tild3466-6236-4865-b366-363964636134/image-svg.svg);
    background-repeat: no-repeat;
    background-size: 30px;
    background-position: 20px 16px;
    position: absolute;
    z-index: 99;
    width: 60px;
    height: 60px;
}


svg.t-catalog__search-icon.js-catalog-filter-search-btn {
    position: relative !important;
    border: none;
    width: 200px;
    padding: 0;
    height: 60px;
    opacity: 0;
}

.t-catalog__search-wrapper:after {
    content: attr(data-search-text);  
    pointer-events: none;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    position: absolute;
    font-size: 16px;
    font-weight: 500;
    right: 0;
    top: 0;
    color: #ffffff;
    background-color: #fcb42f;
    --border-width: 0px;
    border-style: none !important;
    border-radius: 10px;
    box-shadow: none !important;
    transition-duration: 0.2s;
    transition-property: background-color, color, border-color, box-shadow, opacity, transform, gap;
    transition-timing-function: ease-in-out;
    
}

.t-catalog__search-wrapper:has(.t-btn_disabled):after {
    opacity: 0.4;
}



.t-catalog__load-more-btn-wrap {
    display: none;
}


.js-catalog-sort-mob-btn.t-catalog__filter__sort-mob-btn {
    display: none;
}

.js-catalog-search-mob-btn.t-catalog__filter__search-mob-btn {
    display: none;
}



[class*="card__sku"],
[class*="popup__sku"]{
    display: block !important;
    color: #000;
    font-size: 0;
}

[class*="card__sku"]:before,
[class*="popup__sku"]:before {
    content: "ИНН:";
    font-size: 15px;
    margin-right: 5px;
}

span.js-product-sku {
    font-size: 15px;
}


@media screen and (max-width:660px){
    input.t-catalog__filter__input.js-catalog-filter-search {
    width: 100%;
    }
    .t-catalog__search-wrapper {
        flex-wrap: wrap;
    }

    .t-catalog__search-wrapper:after {
        width: 100%;
        position: absolute;
        font-size: 16px;
        font-weight: 500;
        right: 0;
        top: auto;
        bottom: 0;
    }
    
}

    
</style>