Для создания поискового фильтра в JavaScript и вывода результатов на HTML, вам потребуется использовать некоторые базовые концепции и методы языка.
Шаг 1: Подготовка данных
В первую очередь, у вас должен быть доступ к некоторому набору данных в формате JSON. Этот набор данных можно получить из внешнего источника, либо вы можете использовать статический файл JSON, который будет хранить вашу информацию.
Пример JSON-файла (data.json):
[
{
"id": 1,
"name": "Apple",
"type": "Fruit"
},
{
"id": 2,
"name": "Orange",
"type": "Fruit"
},
{
"id": 3,
"name": "Carrot",
"type": "Vegetable"
}
]
Шаг 2: Получение данных и вывод на HTML
Следующим шагом будет получение данных из файла JSON и их отображение на странице HTML. Для этого вы можете использовать методы Fetch API или AJAX, но для простоты примера я буду использовать функцию fetch.
JavaScript:
fetch('data.json')
.then(response => response.json())
.then(data => {
// Итерация по каждому элементу JSON и вывод на HTML
data.forEach(item => {
const listItem = document.createElement('li');
listItem.textContent = `${item.name} - ${item.type}`;
document.getElementById('result').appendChild(listItem);
});
});
HTML:
<ul id="result"></ul>
Этот код извлекает данные из JSON-файла и динамически создает li элементы для каждого элемента JSON. Затем, эти элементы добавляются в ul элемент с идентификатором "result".
Шаг 3: Реализация поискового фильтра
Теперь, когда у вас есть основа для отображения данных, вы можете реализовать поисковый фильтр. Для этого вам понадобится добавить ввод input и слушатель событий keyup, чтобы отслеживать изменения в текстовом поле и фильтровать данные по каждому вводу.
JavaScript:
document.getElementById('search').addEventListener('keyup', function(event) {
const searchValue = event.target.value.toLowerCase();
const items = document.getElementsByTagName('li');
Array.from(items).forEach(item => {
const itemText = item.textContent.toLowerCase();
if (itemText.includes(searchValue)) {
item.style.display = 'block';
} else {
item.style.display = 'none';
}
});
});
HTML:
<input type="text" id="search" placeholder="Search"> <ul id="result"></ul>
В этом коде, мы добавляем слушатель событий keyup для полей input с идентификатором "search". При каждом вводе, мы проверяем, есть ли текстовое значение из input в элементе li. Если значение найдено, мы показываем элемент, в противном случае мы скрываем его.
В итоге, при вводе значения в поле поиска, вы увидите, как фильтр будет применяться к элементам и отображать только те, которые соответствуют критерию поиска.
Это основа того, как создавать поиск-фильтр с выводом на HTML используя JavaScript и JSON. Вы можете дальше развивать этот код, добавлять дополнительные функциональные возможности и улучшать его в соответствии с вашими требованиями.