html文件:我使用了一些div和里面我介绍了一些标题和图像。
在搜索栏中，我只希望当我输入标题时，搜索时屏幕上会出现完整的div。
<body>
<div class="input">
<input type="text" placeholder="Search.." id="searchbar" onkeyup="search_bar()">
<button type="submit"><i class="fa fa-search"></i></button>
</div>
<div class="s10plus" id="divs">
<h2>Samsung Galaxy S10 Plus</h2>
<img src="Images/s10plus.png"></img>
<p id="precios10">Price : $600</p>
</div>
<div class="samsunga10">
<h2>Samsung Galaxy A10</h2>
<img src="Images/a10.png"></img>
<p id="precioa">Price:$600</p>
</div>
<div class="samsunga20">
<h2>Samsung Galaxy A20</h2>
<img src="Images/a20.png"></img>
<p id="precio">Price:$600</p>
</div>
</body>
file.js
function search_bar(){
var a;
var search = document.getElementById('searchbar');
var filter= search.input.toLowerCase();
var ul = document.getElementsByClassName('s10plus');
var nodes = ul.getElementsByTagName('h2').length;
for(i=0; i<nodes; i++){
a =nodes[i].getElementsByTagName('h2')[0];
if(a.innerHTML.toLowerCase().indexOf(filter)> -1){
nodes[i].style.display = "";
}else{
nodes[i].style.display = "none";
}
}
}
您可以在SO中共享一个代码Pen或Codesandbox或在此添加一个剪辑吗？
在您的Js代码中:“li”没有定义，这使得您很难准确地理解您的代码。 此外，设置display:“”不是有效的css属性。 我建议将其设置为显示:“inherit”。
“S10Plus”课程位于:
var ul = document.getElementsByClassName('s10plus');
将始终获得1个元素，因为在html中只有一个div具有该类。
试着调整一下这些问题，看看你能不能更进一步
