не могу сделать поиск по именам товара, то есть мне вот нужно из js_1 и html_1 перенести поиск в js_2 и html_2, помогите и пожалуйста без jQeury
js_1
window.onload = () => {
let input = document.querySelector('#input');
input.oninput = function() {
let value = this.value.trim();
let list = document.querySelectorAll('.ul li');
value
? list.forEach(elem => {
elem.innerText.search(value) == -1
? elem.classList.add('hide')
: elem.classList.remove('hide');
})
: list.forEach(elem => {
elem.classList.remove('hide');
});
};
};
html_1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Живой поиск</title>
</head>
<body>
<div class="wrap">
<input type="text" id="input" class="input">
<div>
<ol class="ul">
<li>яблоко</li>
<li>банан</li>
<li>апельсин</li>
<li>груша</li>
<li>виноград</li>
<li>лимон</li>
<li>арбуз</li>
<li>дыня</li>
<li>помидор</li>
<li>огурец</li>
<li>морковь</li>
</ol>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
js_2
let txt;
let r;
function myFunction(){
let x = document.getElementById("myFile");
if ('files' in x) {
if (x.files.length == 0) {
txt = "а где файл?";
} else {
for (let i = 0; i < x.files.length; i++) {
let file = x.files[i];
if ('name' in file) {
txt = file.name;
r = document.getElementsByClassName('img_popap')[0].style.backgroundImage = "url('" + 'товар/' + txt + "')";
document.getElementsByClassName('img_0')[0].src = 'товар/' + txt;
}
}
}
}
}
let io;
let div;
let kil;
let rer;
let pop;
let rerir;
let rerer;
let clas = 0;
let rtg;
function dayn() {
io = document.querySelector('#production_conteiner');
io.innerHTML += '<div class="imd_' + clas + '" onclick="addNum(this)"><a href="#popap_2" class="wew"><p class="p" id="p' + clas + '"></p><figure id="vyu"><img src="" class="myImg' + clas + '"><figcaption class="figcaption_1" id="figcaption_1' + clas + '"></figcaption><figcaption class="figcaption_2" id="figcaption_2' + clas + '"></figcaption></figure></a></div>';
rtg = "imd_" + clas;
div = document.getElementsByClassName(rtg);
// localStorage.setItem('ui', JSON.stringify(io));
// let rew = localStorage.getItem('ui');
// let person = JSON.parse(rew)
// document.write(person);
// alert(person);
let popip = document.querySelector(".textarea").value;
rerir = document.querySelector("#p" + clas).innerHTML = popip;
pop = document.getElementById("popop").value;
rer = document.querySelector("#figcaption_1" + clas).innerHTML = pop;
let popop = document.getElementById("pop").value;
rerer = document.querySelector("#figcaption_2" + clas).innerHTML = popop;
document.querySelector(".myImg" + clas).src = 'товар/' + txt;
clas++;
}
const elements = document.querySelectorAll("#production_conteiner div");
function addNum(el) {
let dever = el.className;
let weber = document.getElementsByClassName(dever)[0];
let rerir_1 = weber.querySelector(".p").innerHTML;
document.querySelector(".textarea_1").innerHTML = rerir_1;
let rer_1 = weber.querySelector(".figcaption_1").innerHTML;
document.querySelector(".popop_1").innerHTML = rer_1;
let rerer_1 = weber.querySelector(".figcaption_2").innerHTML;
document.getElementById("pop_1").value = rerer_1;
document.querySelector(".myImg").src = 'товар/' + txt;
};
html_2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ПельмешИКо</title>
<link rel="stylesheet" href="css/style_2.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="shortcut icon" type="image/png" href="img/icon.png" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500;700&display=swap" rel="stylesheet">
</head>
<body onload="myFunction()">
<div class="div">
<header id="header">
<ul class="li_header">
<li class="li_1"><a href="index.html">Главная</a></li>
<li class="li_2"><a href="production.html">Продукция</a></li>
<li class="li_6"><img src="img/иконка.png" class="icon"></li>
<li class="li_3"><a href="basket.html">Корзина</a></li>
<li class="li_4"><a href="help.html">Помощь</a></li>
</ul>
</header>
<main class="content">
<div class="ryt">
<div id="mySearch"><input type="text" class="rew" id="input"><img class="imw_1" src="img/поиск.png"></div>
<select class="burger">
<option>Полуфабрикаты собственного производства</option>
<option>Полуфабрикаты других производителей</option>
<option>Колбасы и деликатесы</option>
<option>Овощи, ягоды, грибы</option>
<option>Молочная продукция</option>
<option>Сыры</option>
<option>Бакалея</option>
</select>
</div>
<main id="production_conteiner">
<figure class="fig">
<a href="#popap_1">
<img src="img/плюс.png" type="button" href="#popap_1">
</a>
</figure>
</main>
</main>
<footer>
<img src="img/иконка_footer.png" class="img_footer">
<p class="text_p_footer">
<img src="img/геолокация.png" class="geo">
город Ангарск<br>
18мкр., д. 19,<br>
вход со двора,<br>
около 1 подъезда
</p>
<ul class="li_p_footer">
<li><a href="tel: 89149373697"><img src="img/вотсап.png" class="img_contact_1"><p>89149373697</p></a></li>
<li><a href="https://www.instagram.com/pelmesh_iko/"><img src="img/инстограмм.png" class="img_contact_3"><p>@Pelmesh_iko</p></a></li>
<li><a href="tel: 89149373697"><img src="img/вайбер.png" class="img_contact_1"><p>89149373697</p></a></li>
</ul>
</footer>
</div>
<div id="popap_1">
<a href="#header" id="cloze_2" onclick="dayn()"></a>
<div class="popap_body">
<div class="popap_header">
<a href="#header" onclick="dayn()"><img src="img/закрыть.png" id="cloze_1"></a>
</div>
<div class="popap_mini_body">
<div class="image_popap">
<div class="img_popap">
<input type="file" id="myFile" onchange="myFunction()"></div></div>
<div class="ul_input">
<ul class="">
<li><textarea name="name" id="popop" class="name_popap">название продукта</textarea></li>
<li><input type="text" class="input_rubli" value="штуки"></li>
<li><input type="text" class="input_rubli" id="pop" value="цена за шт."></li>
</ul>
</div>
</div>
<textarea name="opisanie" id="textarea" class="textarea">описание продукта</textarea>
</div>
</div>
<div id="popap_2">
<a href="#header" id="cloze_2" onclick="terte()"></a>
<div class="popap_body">
<div class="popap_header">
<a href="#header"><img src="img/закрыть.png" id="cloze_1" onclick="terte()"></a>
<a href="#"><img src="img/корзина.png" id="korzina" onclick="copyPaste()"></a>
</div>
<div class="popap_mini_body">
<div class="image_popap">
<div class="img_popap">
<input type="file" id="myFile" onchange="myFunction()"></div></div>
<div class="ul_input">
<ul class="">
<li><textarea name="name" class="popop_1" class="name_popap"></textarea></li>
<li><input type="text" class="input_rubli"></li>
<li><input type="text" class="input_rubli" id="pop_1"></li>
</ul>
</div>
</div>
<textarea name="opisanie" class="textarea_1"></textarea>
</div>
</div>
</div>
<script src="js/code.js"></script>
</body>
</html>