Как сделать поиск категорий на jquery без БД?

Question

[Golcberg]

Есть категория, подкатегории и разоновидность товара на сайте. Есть поле поиска на сайте, когда клиент вписывает название товара категории в поле input я хочу чтобы не из БД вытаксивалось назавние искомой категории, а прошел поиск по DOM нашел искомую категорию,подкатегорию,разновидность и клиенту отобразился, если такая есть. Как это сделать на jquery? поиск живой без перезагрузок страницы, реагирует на ввод текста в поле

<input class="form-control " id="catalogsearch" name="catalogsearch" placeholder="Введите категорию или название товара" style="width: 653px;height: 28px;border-radius: 3px;font-size: 12px;color: gray;box-shadow: 0 1px 4px 0 #c9bfbf;"  type="text">

//Категория
                                    <div class="c1">Туфли<br>
//Подкатегория
                                        <div class="oka2" style="display:block;position: absolute;right: -245px;top:210;width: 245px;" >
                                          <div class="c2"><div class="oka3"></div>Деловые</div>
                                          <div class="c2"><div class="oka3"></div>Лодочки</div>
                                          <div class="c2"><div class="oka3"></div>Лоферы</div>
                                          <div class="c2"><div class="oka3"></div>На плоской подошве</div>
                                          <div class="c2"><div class="oka3"></div>С круглым носом</div>
                                          <div class="c2"><div class="oka3"></div>С открытыми боками</div>
                                          <div class="c2"><div class="oka3"></div>С открытым носом</div>
                                          <div class="c2"><div class=""></div>С ремешком
//Разновидность товара
                                            <div class="oka3" style="display:none;position: absolute;right: -245px;top:105px;width: 245px;">
                                              <div class="c3">С застежкой на лодыжке</div>
                                              <div class="c3">С открытой пяткой</div>
                                              <div class="c3">Туфли Мэри Джейн</div>
                                            </div>
                                          </div>
                                            
                                        </div>
                                      </div>

Comments

[Kovalsky]

А какой помощи вы ждёте, если вы сами описали весь алгоритм - "чтобы не из БД вытаксивалось назавние искомой категории, а прошел поиск по DOM нашел искомую категорию,подкатегорию,разновидность и клиенту отобразился, если такая есть"? Делайте как написали, благословляю вас) Что до вопроса "Как это сделать на jquery?", то без издевок могу вам ответить, что как придумаете, так и будет сделано. Лучше опишите конкретно какие пункты вам неясны.

[Golcberg]

Никита Полевой, ну как это сделать на jquery неясно, чтобы при вводе в input появилось в отдельном поле список категорий искомых.

[Kovalsky]

Golcberg, "как это сделать на jquery неясно, чтобы при вводе в input появилось в отдельном поле список категорий искомых" - это не конкретный пункт. Для того чтобы в отдельном поле появился список категорий надо 1) сотворить поле (блок, элемент), и 2) в этот элемент положить список выбранных категорий. Какой из этих пунктов не поддаётся реализации?

[Golcberg]

Никита Полевой, я вкурсе, непонятно как на jquery это написать скрипт.

[Kovalsky]

Golcberg, я повторяю - напишите конкретный непонятный для вас пункт. Вы понимаете, что ваша задача состоит из нескольких этапов? Каждый из этих этапов сам по себе элементарный, осталось только выяснить с каким проблема у вас. Вы не можете создать элемент или вы не можете выбрать нужные элементы из DOM или что? И пожалуйста не отвечайте "непонятно как написать на jquery", эта мантра вряд ли мотивирует кого-то здесь выдать вам готовый код только потому что вам лень расписать задачу.

[Golcberg]

Никита Полевой, у меня очень низний уровень знания js неясно как вытащить из c0,c1,c2 слова которые в input'е и как похожие слова(живой поиск) вставить в отдельнй блок списком, ввида: Туфли -> С ремешком -> Туфли Мэри Джейн
Например клиент вбивает "Рем", надо пройтиесь по категориям(это неясно как сделать) найти все слова содержащиееся "Рем" и получится(неясно как сформировать на jquery этот список):
Женские аксессуары-"Рем"ни
Туфли - С "рем"ешком
и тд

Answer 1

[Иван]

Есть правильный и не правильный способы.
Правильный: хранить список не в DOM, а переменной. А её уже рендерить в список, можно фильтрованный. Лучше всего взять VUE для автоматического связывания.
Не правильный: распарсить список форфорычем например или each. Далее по аналогии с 1 вариантом.