Как сделать кнопки быстрого поиска для блока Т838 в Tilda

Как сделать кнопки быстрого поиска для блока Т838 в Tilda

1
Создали блок Т838 и задали ему класс uc-search-block
2
Создали блок ME606 и задали ему класс uc-search-button
3
Вставили код в блок Другое - Т123
Библиотека для примера

<script>
document.addEventListener("DOMContentLoaded", function() {

//Время для смены слов в мс
let timeSliding = 2000;

//Формируем массив из слов для запроса
let searchTextArray = [];

let srchButton = document.querySelectorAll('.uc-search-button .t976__menu-link');
for(let i = 0; i < srchButton.length; ++i){
    let element = srchButton[i];
    let searchText = element.textContent;
    searchTextArray.push(searchText);
};


let searchInput =  document.querySelector('.uc-search-block .t-input');
let searchTimer;

//Создаём автоматическую смену слов запросов
function searchSliding(){
    
    let counter = 1;
    searchInput.value = searchTextArray[0];  
    
    searchTimer = setInterval(function() {
        
        searchInput.classList.add('anim-mode');
    
        setTimeout(function(){
            searchInput.value = searchTextArray[counter];  
        }, 250);
            
        setTimeout(function(){
            searchInput.classList.remove('anim-mode');
        }, 600);
        
        counter++;
        if(counter==searchTextArray.length) counter = 0;
    }, timeSliding );   

};

searchSliding();


//Формируем границу для поля поиска

const inputWrapper = document.createElement('div');
inputWrapper.classList.add('input-wrapper');
searchInput.parentNode.insertBefore(inputWrapper, searchInput);
inputWrapper.appendChild(searchInput);

const borderSearch = document.createElement('div');
borderSearch.classList.add('border-search');
inputWrapper.append(borderSearch);


   
//Удаляем ссылки у кнопок
const menuLinks = document.querySelectorAll('.uc-search-button .t976__menu-link');
menuLinks.forEach(link => link.removeAttribute('href'));


let notClear = false;

//Обработка клика по кнопкам для поиска
document.querySelector(".uc-search-button").addEventListener("click", function(event) {
    if (event.target.classList.contains("t976__menu-link")) {
        
        clearInterval(searchTimer);    
        notClear = true;

        const element = event.target;
        const searchText = element.innerText || element.textContent; 
    
        searchInput.focus();
        
        searchInput.classList.remove('anim-mode');   
        searchInput.value= searchText;
        
        searchInput.dispatchEvent(new Event('input', { bubbles: true }));
        
  }
});


    
//При получении полем фокуса    
searchInput.addEventListener('focus', function() {
    clearInterval(searchTimer);        
    if(!notClear) searchInput.value = '';
    searchInput.classList.add('active-search');
});


//Старт смены слов
function searchStartSliding(){
    setTimeout(function(){
        if(searchInput.value == '')  {
            notClear = false;
            searchSliding();
            searchInput.classList.remove('active-search');
        };
    }, 100);
};

//При потере фокуса у поля
searchInput.addEventListener('focusout', function(){
    searchStartSliding()
});

//При нажатии кнопки очистки поиска
document.querySelector(".uc-search-block").addEventListener("click", function(event) {
    if (event.target.classList.contains("t-site-search-close")) {
        searchStartSliding()    
  }
});


//При вводе в поиск
searchInput.addEventListener('input', function(){
    if(searchInput.value == '')  {
        notClear = false; 
    }else{
        notClear = true; 
    };
});


});

</script>



<style>

.uc-search-block input.t838__input.t-input {
    background: none !important;
    opacity: 0.4;
}

.uc-search-block input.t838__input.t-input.anim-mode {
    animation: slide-input 500ms ease-in-out;
}


.uc-search-block .t838__blockinput {
    position: relative;
    background-color: #fff;
    border-radius: 10px;
}

.uc-search-block .border-search {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #b3b3b3;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transition: 0.2s ease-in-out;
    opacity: 0;
    pointer-events: none;
}

.uc-search-block input.t838__input.t-input.active-search,
.uc-search-block input.t838__input.t-input:focus,
.uc-search-block input.t838__input.t-input:focus~div.border-search {
    opacity: 1;
}  

.uc-search-button .t976__menu-link{
    cursor: pointer;
}


.uc-search-block .t-site-search-dm::-webkit-scrollbar-thumb {
    background: #c2c2c2;   
    border-radius: 5px;
}
.uc-search-block .t-site-search-dm::-webkit-scrollbar {
    width: 3px;
    background: #ffffff;
}

.input-wrapper{
    overflow: hidden;
}


@keyframes slide-input {   
  0% {
  } 
  50% {  
        transform: translateY(100%);
  } 
  51%{
        transform: translateY(-100%);
  }
  100% {
        transform: translateY(0%);
   }
}



</style>
Made on
Tilda