Как реализовать поиск карточек товара по многостраничному интернет каталогу, товары расположены в виде структуры каталога, разные категории товара на разных page.html,(Категория.html --> Подкатегория.html --> Товары.html) и чтобы поиск работал со всех страниц сайта. Весь интернет перерыл, нашел кучу способов как реализовать на JQuery, но все способы это поиск карточек товаров на одностраничном сайте. Как объединить несколько html страниц для одного скрипта поиска сообразить не могу. Пример кода на JQuery. В рамках одной страницы поиск работает шикарно, но как сделать чтоб скрипт отлавливал все станицы с карточками товаров сайта, создании БД товаров в ТЗ не было.
index_1.html
<div class="row">
<div class="col-md-4">
<input type="text" id="search" class="form-control" placeholder="Search product by name or sku">
</div>
<div class="row" id="parent">
<div class="col-md-2 box drink">
<center>
<img src="http://via.placeholder.com/80x80" class="" alt="">
<p class="name">Pepsi </p>
<p class="sku">D-1251</p>
<p>$ 2,410</p>
</center>
</div>
<div class="col-md-2 box food">
<center>
<img src="http://via.placeholder.com/80x80" class="" alt="">
<p class="name">Burger </p>
<p class="sku">F-125</p>
<p>$ 2,410</p>
</center>
</div>
index_2.html
<div class="row">
<div class="col-md-4">
<input type="text" id="search" class="form-control" placeholder="Search product by name or sku">
</div>
<div class="row" id="parent">
<div class="col-md-2 box Car">
<center>
<img src="http://via.placeholder.com/80x80" class="" alt="">
<p class="name">BMW</p>
<p class="sku">i530</p>
<p>$ 20,410</p>
</center>
</div>
<div class="col-md-2 box Bike">
<center>
<img src="http://via.placeholder.com/80x80" class="" alt="">
<p class="name">Bugatti</p>
<p class="sku">X700</p>
<p>$ 20,410</p>
</center>
</div>
$(document).ready(function () {
var $btns = $(".btn").click(function () {
if (this.id == "all") {
$("#parent > div").fadeIn(450);
} else {
var $el = $("." + this.id).fadeIn(450);
$("#parent > div").not($el).hide();
}
$btns.removeClass("active");
$(this).addClass("active");
});
var $search = $("#search").on("input", function () {
$btns.removeClass("active");
var matcher = new RegExp($(this).val(), "gi");
$(".box")
.show()
.not(function () {
return matcher.test($(this).find(".name, .sku").text());
})
.hide();
});
});
