Для реализации функции поиска, которая отображает результаты сразу после ввода текста и ограничивает их количество до 5, можно использовать JavaScript в сочетании с HTML и CSS. Вот пример реализации, который включает использование локального массива данных для демонстрации:
### HTML
```html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Поиск</title>
<style>
#results {
border: 1px solid #ccc;
max-height: 150px;
overflow-y: auto;
display: none;
}
.result-item {
padding: 8px;
cursor: pointer;
}
.result-item:hover {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<input type="text" id="search" placeholder="Введите ваш запрос..." />
<div id="results"></div>
<script>
const data = [
"Apple",
"Banana",
"Cherry",
"Date",
"Fig",
"Grape",
"Kiwi",
"Lemon",
"Mango",
"Nectarine"
];
const searchInput = document.getElementById('search');
const resultsDiv = document.getElementById('results');
searchInput.addEventListener('input', function() {
const query = searchInput.value.toLowerCase();
resultsDiv.innerHTML = ''; // Очищаем предыдущие результаты
resultsDiv.style.display = 'none'; // Скрываем результаты по умолчанию
if (query) {
const filteredResults = data.filter(item => item.toLowerCase().includes(query)).slice(0, 5);
if (filteredResults.length > 0) {
filteredResults.forEach(result => {
const div = document.createElement('div');
div.classList.add('result-item');
div.textContent = result;
resultsDiv.appendChild(div);
div.addEventListener('click', function() {
searchInput.value = result; // Устанавливаем значение выбранного результата
resultsDiv.innerHTML = ''; // Очищаем результаты
resultsDiv.style.display = 'none'; // Скрываем результаты
});
});
resultsDiv.style.display = 'block'; // Показываем результаты
}
}
});
</script>
</body>
</html>
```
### Описание кода:
1. **HTML**: Создается поле ввода и контейнер для отображения результатов.
2. **CSS**: Стили для контейнера с результатами, чтобы он выглядел привлекательно и содержал не более 5 элементов.
3. **JavaScript**:
- Создается массив `data` с возможными результатами поиска.
- Добавляется обработчик событий на поле ввода, который срабатывает при каждом вводе (событие `input`).
- В функции обработчика:
- Очищается предыдущий список результатов и скрывается контейнер с результатами.
- Фильтруются результаты на основе введенного текста (с помощью `filter` и `includes`), и берутся только первые 5 результатов.
- Если результаты найдены, они отображаются в контейнере.
- Добавляется обработчик на результат, чтобы при клике он заполнял поле ввода и очищал список.
Этот код позволит вам создать простую функцию поиска, которая будет показывать результаты сразу после ввода текста. Вы можете адаптировать его под свои нужды, например, подключив к серверу для получения данных.