<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>