Быстрый поиск по 400 статьям на предмет наиболее близкой по смыслу (заголовок и аннотация)
Попробуйте:
топливо на ближнем востоке,
старики деньги или
саранча огонь
#searchForm {
margin-bottom: 20px;
}
#searchInput {
padding: 10px;
margin-right: 10px;
}
#suggestions {
margin-top: 10px;
}
.suggestion {
cursor: pointer;
margin-right: 0px;
padding-bottom: 2px;
border-bottom: 1px dashed #cccccc;
color: inherit;
}
.searchResultContainer {
display: none;
border: 1px solid #cccccc; /* Светло-серая рамка */
border-radius: 5px;
padding: 10px;
}
#title {
color: #333;
font-size: 1.2em;
margin-top: 0;
margin-bottom: 0.5em;
}
#description {
margin-top: 0;
}
.loader {
border: 5px solid #f3f3f3; /* Светлый цвет */
border-top: 5px solid #3498db; /* Синий цвет */
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 2s linear infinite;
margin: 20px auto;
display: none; /* Изначально скрыт */
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
#searchInput {
padding: 10px;
margin-right: 10px;
width: 100%; /* Базовая ширина для мобильных и маленьких экранов */
box-sizing: border-box; /* Убедитесь, что padding включен в ширину */
}
@media (min-width: 768px) { /* Медиа-запрос для экранов шириной 768px и более */
#searchInput {
width: 70%; /* Увеличенная ширина для десктопов */
}
}var requestURL = ‘https://n8n.artemdzyuba.ru/webhook/5a9ae772-bf93-4356-ac7a-f01b0fe0b87c’;
document.getElementById(‘searchForm’).addEventListener(‘submit’, function(event) {
event.preventDefault();
var searchTerm = document.getElementById(‘searchInput’).value;
var loader = document.getElementById(‘loader’);
var resultsDiv = document.getElementById(‘searchResults’);
// Показываем лоадер
loader.style.display = ‘block’;
resultsDiv.style.display = ‘none’; // Скрываем результаты
fetch(requestURL, {
method: ‘POST’,
headers: {
‘Content-Type’: ‘application/json’,
},
body: JSON.stringify({ query: searchTerm })
})
.then(response => response.json())
.then(data => {
document.getElementById(‘title’).textContent = data.title;
document.getElementById(‘description’).textContent = data.description;
resultsDiv.style.display = ‘block’; // Показываем результаты
loader.style.display = ‘none’; // Скрываем лоадер
})
.catch(error => {
console.error(‘Ошибка:’, error);
loader.style.display = ‘none’; // В случае ошибки также скрываем лоадер
});
});
var suggestions = document.querySelectorAll(‘.suggestion’);
suggestions.forEach(function(suggestion) {
suggestion.addEventListener(‘click’, function(event) {
document.getElementById(‘searchInput’).value = event.target.textContent;
// Не отправляем форму, только заполняем поле ввода
});
});