0 / 0 / 0
Регистрация: 18.08.2021
Сообщений: 72

Как мне реализовать ?

24.02.2023, 11:33. Показов 355. Ответов 0

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

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

Также, если клиент вводит запятую вместо точки, то скрипт должен приравнять их и всё равно выполнять поиск.
Написал данный скрипт
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<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>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
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 Как реализовать или прописать в коде ?
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
24.02.2023, 11:33
Ответы с готовыми решениями:

Как мне реализовать Массив в JS?
Дан массив, содержащий заработную плату лучших работников фабрики. Менеджер решил повысить им заработную плату на определенный процент, и...

Подскажите как мне реализовать данный код
Подскажите как мне реализовать данный код? var menu = angular.element(document.querySelectorAll(&quot;.mane-menu__element&quot;));...

Как мне реализовать столкновение по вертикали?
Пытаюсь сделать игрульку с управлением WASD и видом сверху. Коллизия работает только для лево, право, верх, низ корректно. Но вот когда я...

0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
24.02.2023, 11:33
Помогаю со студенческими работами здесь

Как мне реализовать Dial по нажатию
Всем привет! Котлин посл.версия установлена. Постараюсь объяснить. Делаю проект. Задача: как чтобы по нажатию на номер телефона...

Как мне реализовать сортировку массива на форме?
obj:=TArrClass.Two(stg2.ColCount); for i:=0 to Length(obj.mas)-1 do begin for j:=i+1 to Length(obj.mas)-1 do ...

Как мне правильно реализовать связь между таблицами
Имеются такая вот схема данных, точнее ее часть (смотрите во вложениях) Не устраивает меня связь заказы - расшифровки. Согласно...

Объясните мне, как реализовать разделённый доступ, пожалуйста
Вечер добрый, господа. Ситуация такая. У меня есть кривая БД, сделанная в MS Access, и кривая Форма, сделанная на Windows Forms C#, и к ним...

Как мне реализовать перевод числа из семеричной системы в ascii код
Не могу реализовать программу, так как не понимаю как перевести из семеричной в десятичную, а из десятичной в ascii код. Очень надеюсь на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

Новые блоги и статьи
Валидация и контроль данных табличной части документа перед записью
Maks 22.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в КА2. Задача: контроль и валидация данных табличной части документа перед записью с учетом регламента компании. . .
Отчёт о затраченных материалах за определенный период с макетом печатной формы
Maks 21.04.2026
Отчёт из решения ниже размещён в конфигурации КА2. Задача: разработка отчёта по затраченным материалам за определённый период, с возможностью вывода печатной формы отчёта с шапкой и подвалом. В. . .
Отчёт о спецтехнике находящейся в ремонте
Maks 20.04.2026
Отчёт из решения ниже размещен в конфигурации КА2. Задача: отобразить спецтехнику, которая на данный момент находится в ремонте. Есть нетиповой документ "Заявка на ремонт спецтехники" который. . .
Памятка для бота и "визитка" для читателей "Semantic Universe Layer (Слой семантической вселенной)"
Hrethgir 19.04.2026
Сгенерировано для краткого описания по случаю сборки и компиляции скелета серверного приложения. И пусть после этого скажут, что статьи сгенерированные AI - туфта и не интересно. И это не реклама -. . .
Запрет удаления строк ТЧ документа при определённом условии
Maks 19.04.2026
Алгоритм из решения ниже реализован на примере нетипового документа "Аккумуляторы", разработанного в конфигурации КА2. У данного документа есть ТЧ, в которой в зависимости от прав доступа. . .
Модель заражения группы наркоманов
alhaos 17.04.2026
Условия задачи сформулированы тут Суть: - Группа наркоманов из 10 человек. - Только один инфицирован ВИЧ. - Колются одной иглой. - Колются раз в день. - Колются последовательно через. . .
Мысли в слух. Про "навсегда".
kumehtar 16.04.2026
Подумалось тут, что наверное очень глупо использовать во всяких своих установках понятие "навсегда". Это очень сильное понятие, и я только начинаю понимать край его смысла, не смотря на то что давно. . .
My Business CRM
MaGz GoLd 16.04.2026
Всем привет, недавно возникла потребность создать CRM, для личных нужд. Собственно программа предоставляет из себя базу данных клиентов, в которой можно фиксировать звонки, стадии сделки, а также. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru