.custom-search-container {
max-width: 500px;
margin: 0 auto 30px;
position: relative;
}
.search-input-wrapper {
display: flex;
gap: 10px;
background: #fff;
border-radius: 8px;
padding: 5px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
border: 1px solid #e1e5e9;
}
#doctorSearch {
flex: 1;
padding: 12px 16px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
outline: none;
transition: border-color 0.3s;
}
#doctorSearch:focus {
border-color: #007cba;
box-shadow: 0 0 0 2px rgba(0,124,186,0.2);
}
#searchBtn, #clearBtn {
padding: 12px 20px;
background: #007cba;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
transition: all 0.3s;
white-space: nowrap;
}
#searchBtn:hover {
background: #005a87;
transform: translateY(-1px);
}
#clearBtn {
background: #dc3232;
padding: 12px 16px;
font-size: 18px;
min-width: 45px;
}
#clearBtn:hover {
background: #a02929;
}
.search-input-wrapper .no-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #fff;
border: 1px solid #ddd;
border-radius: 6px;
padding: 12px;
margin-top: 5px;
color: #666;
font-style: italic;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
z-index: 1000;
}
@media (max-width: 768px) {
.search-input-wrapper {
flex-direction: column;
}
#searchBtn, #clearBtn {
width: 100%;
}
}
document.addEventListener('DOMContentLoaded', function() {
const searchInput = document.getElementById('doctorSearch');
const searchBtn = document.getElementById('searchBtn');
const clearBtn = document.getElementById('clearBtn');
// Функция поиска
function performSearch() {
const searchTerm = searchInput.value.trim().toLowerCase();
const loopItems = document.querySelectorAll('.elementor-loop-item, .e-loop-item, .post-item, .grid-item');
let visibleCount = 0;
loopItems.forEach(item => {
const textContent = item.textContent || item.innerText || '';
const matches = textContent.toLowerCase().includes(searchTerm);
if (searchTerm === '') {
item.style.display = '';
item.classList.remove('e-loop-item-hidden');
} else {
if (matches) {
item.style.display = '';
item.classList.remove('e-loop-item-hidden');
visibleCount++;
} else {
item.style.display = 'none';
item.classList.add('e-loop-item-hidden');
}
}
});
// Показать/скрыть сообщение
let noResultsMsg = document.querySelector('.no-results');
if (!noResultsMsg) {
noResultsMsg = document.createElement('div');
noResultsMsg.className = 'no-results';
noResultsMsg.innerHTML = 'Žádný lékař neodpovídá vašemu vyhledávání.';
document.querySelector('.search-input-wrapper').appendChild(noResultsMsg);
}
noResultsMsg.style.display = (searchTerm !== '' && visibleCount === 0) ? 'block' : 'none';
// Показать кнопку очистки
clearBtn.style.display = searchTerm ? 'block' : 'none';
}
// События поиска
searchBtn.addEventListener('click', performSearch);
searchInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
performSearch();
}
});
// Очистка поиска
clearBtn.addEventListener('click', function() {
searchInput.value = '';
performSearch();
searchInput.focus();
});
// Задержка поиска при вводе (debounce)
let searchTimeout;
searchInput.addEventListener('input', function() {
clearTimeout(searchTimeout);
searchTimeout = setTimeout(performSearch, 300);
});
// Инициализация - показать все элементы
performSearch();
});
