данные из json - JavaScript, Ajax

web developer · 19.02.2023, 19:02

данные из json при написаний 3 символов должны выводится в input в консоли ошибок нету в чем может быть причина пути проверял

Код:

<!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;
}

// Функция для отображения

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
ак сделать стилизированными json данные, выходящие из html формы	Malik Iss	JavaScript, Ajax	0	17.02.2020 11:12
как получить данные из json?	Ivan912	PHP	1	28.08.2019 09:26
Считать данные из JSON	cherry25	JavaScript, Ajax	8	04.10.2018 14:16
JSON получить данные	flug	Общие вопросы Delphi	5	05.02.2017 02:02
JSON данные	Smagulov85	Работа с сетью в Delphi	25	07.08.2014 11:44