Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > JavaScript, Ajax
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 24.02.2023, 11:35   #1
web developer
Пользователь
 
Регистрация: 04.06.2022
Сообщений: 62
По умолчанию javascript json

Есть поле ввода (input), при вводе первых 2-3 букв или цифр, должны выходить подсказки, снизу. Нужен скрипт на JS, который будет подтягивать подсказки из файла json (краткая версия в прикреплении). Поиск совпадений должен осуществляться во всех словах, которые есть в файле, но подсказки должны формироваться из названия разделов, которые находятся в атрибуте "name", по иерархии находящиеся после второго "items" (показано в скрине 2). Далее, если пользователь выбрал одну из подсказок, скрипт должен подтянуть и показать (в отдельном блоке), все данные из массива, которые находятся ниже, по иерархии, после атрибута "items". Пример файла json в прикреплении к заданию. Также, нужно сделать возможность, клиенту, вводить повторно, в поле ввода буквы или цифры, для поиска нужного раздела, сколько угодно раз.

Плюс ко всему, если клиент вводит цифры, то, при вводе, минимум, двух цифр, скрипт должен искать совпадения, только с начала строки, в атрибуте "code" со значениями не более 4-х цифр. Там где значение атрибута "code" больше 4-х цифр, это значение не должно показываться в подсказке. В подсказке должно быть, с начала цифра из атрибута "code" потом двоеточие и после быть значение атрибута "name", который идёт после соответствующего атрибута "code".

Также, если клиент вводит запятую вместо точки, то скрипт должен приравнять их и всё равно выполнять поиск.
Написал данный скрипт
Код:
<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><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');
 
 
let data = {
  "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"
        }
      ]
    }
  ]
};
 
// Функция для формирования списка подсказок
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.items.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;
}
 
// Функция для отображения
 
searchInput.addEventListener('input', (e) => {
  e.preventDefault();
  const findItems =  searchItems(e.target.value)
  showSearchResults(findItems);
})
При вводе ban он не выдает ничего, хотя должен выдать 1001: Fruits и подсказки должны показываться после ввода минимум буквенных 3 символа, а по цифрам минимум 2
И при выборе какой либо подсказки, должно появляться, отдельный блок, в виде текста, где будет указано в этой категории. Например, если выбрали 1001: Fruits, то должно появиться: Apple, Banana, Orange Как реализовать или прописать в коде ?
web developer вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
JSON (ISuperObject) как сформировать json объект Alar Общие вопросы Web 1 23.03.2022 08:52
JSON на нативном javascript Bender1000 JavaScript, Ajax 3 06.09.2015 02:28
Передача JSON-строки из PHP в JavaScript Voronar JavaScript, Ajax 5 09.02.2013 19:00
Итерация через объект JSON в Javascript maomam Помощь студентам 0 03.11.2012 00:51
json encode\decode в javascript mrgrudge JavaScript, Ajax 5 01.06.2011 16:34