пути проверял
<!DOCTYPE html>
<html>
<head>
<title>Поиск элементов</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#search-input {
padding: 8px;
font-size: 16px;
width: 100%;
box-sizing: border-box;
}
#search-results {
list-style: none;
margin: 0;
padding: 0;
}
#search-results li {
padding: 8px;
font-size: 16px;
border-bottom: 1px solid #ccc;
}
#search-results li.category {
font-weight: bold;
background-color: #f0f0f0;
}
#item-details {
margin-top: 16px;
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<input id="search-input" type="text" placeholder="Введите поисковый запрос...">
<ul id="search-results"></ul>
<div id="item-details"></div>
<script src="script.js"></script>
</body>
</html>
const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');
const itemDetails = document.getElementById('item-details');
const jsonFileUrl = 'data.json';
let data;
// Загрузка данных из json-файла
fetch(jsonFileUrl)
.then(response => response.json())
.then(jsonData => {
data = jsonData;
})
.catch(error => console.error(error));
// Функция для формирования списка подсказок
function showSearchResults(results) {
// Очистка списка подсказок
searchResults.innerHTML = '';
// Добавление элементов в список подсказок
for (let i = 0; i < results.length; i++) {
const li = document.createElement('li');
const item = results[i];
// Проверка, является ли элемент разделом (имеет ли он дочерние элементы)
const isCategory = item.items && item.items.length > 0;
// Формирование подсказки
let suggestion = '';
if (item.code && item.name) {
suggestion = item.code + ': ' + item.name;
} else if (item.name) {
suggestion = item.name;
}
// Добавление класса "category" для разделов
if (isCategory) {
li.classList.add('category');
}
// Добавление элемента в список подсказок
li.textContent = suggestion;
searchResults.appendChild(li);
// Добавление обработчика клика на элементы списка подсказок
li.addEventListener('click', function() {
// Очистка списка подсказок
searchResults.innerHTML = '';
// Отображение подробной информации о выбранном элементе
showItemDetails(item);
});
}
}
// Функция для поиска элементов
function searchItems(query) {
// Проверка, есть ли данные для поиска
if (!data) {
return [];
}
// Разбивка запроса на слова
const words = query.toLowerCase().split(' ');
// Фильтрация элементов, удовлетворяющих хотя бы одному из слов
const filtered = data.filter(function(item) {
const text = (item.code || '') + ' ' + (item.name || '');
return words.every(function(word) {
return text.toLowerCase().indexOf(word) >= 0;
});
});
// Сортировка элементов по весу и алфавиту
const sorted = filtered.sort(function(a, b) {
const weightDiff = (b.weight || 0) - (a.weight || 0);
if (weightDiff !== 0) {
return weightDiff;
} else if (a.name && b.name) {
return a.name.localeCompare(b.name);
} else {
return 0;
}
});
// Ограничение количества результатов
const limit = 10;
const sliced = sorted.slice(0, limit);
// Возврат отфильтрованных и отсортированных элементов
return sliced;
}
// Функция для отображения
{
"items": [
{
"name": "Fruits",
"code": "1001",
"items": [
{
"name": "Apple",
"code": "1001.01"
},
{
"name": "Banana",
"code": "1001.02"
},
{
"name": "Orange",
"code": "1001.03"
}
]
},
{
"name": "Vegetables",
"code": "1002",
"items": [
{
"name": "Carrot",
"code": "1002.01"
},
{
"name": "Tomato",
"code": "1002.02"
},
{
"name": "Potato",
"code": "1002.03"
}
]
},
{
"name": "Beverages",
"code": "1003",
"items": [
{
"name": "Coffee",
"code": "1003.01"
},
{
"name": "Tea",
"code": "1003.02"
},
{
"name": "So",
"code": "1003.03"
}
]
}
]
}
Простой
