javascript搜索函数

我创建了一个具有搜索功能的表，它可以工作，因此如果我在输入中写入产品标题，那么它将仅显示该产品，并且所有其他项目都将被隐藏。 但现在我有了另一个页面，其中所有产品都有引导缩略图样式（不使用table、tr和td），我也尝试在这里执行此搜索功能，但它不起作用。我是Javascript/Jquery的初学者。有人能帮我吗？这是网页：

    <div class="col-md-12">
        <input type="text" id="myInput" onkeyup="myProdFunction()" placeholder="Keresés..">
    </div>

    <div class="osszterm" id="prodsearch">
    @foreach($products as $product)

        <div class="col-sm-4 col-md-2" id="prodid">
            <div class="thumbnail">
                <img src="/avatars/{{ $product->avatar }}" alt="">
                    <div class="caption">
                        <a href="#"><h3 id="prodname">{{ $product->ptitle }}</h3></a>
                        <p>{{ $product->par }} Ft</p>
                        <p>{{ $product->pdb }} db</p>
                    </div>
            </div>
        </div>
    @endforeach
    </div>

@foreach（$products as$product）
化身}}“alt=”“>
{{$product->par}}Ft

{{$product->pdb}}db

@endforeach

Javascript:

function myProdFunction() {
// Declare variables 
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("prodsearch");
tr = table.getElementById("prodid").getElementByClassName("thumbnail");

for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsById("prodname")[1];


if (td) {
  if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
    tr[i].style.display = "";
  } else {
    tr[i].style.display = "none";
  }
} 
}
}

函数myProdFunction（）{
//声明变量
var输入、过滤器、表格、tr、td、i；
输入=document.getElementById（“myInput”）；
filter=input.value.toUpperCase（）；
table=document.getElementById（“prodsearch”）；
tr=table.getElementById（“prodid”）.getElementByClassName（“缩略图”）；
对于（i=0；i-1）{
tr[i].style.display=“”；
}否则{
tr[i].style.display=“无”；
}
} 
}
}

重写函数以使用引导中的缩略图div。jQuery中有足够的选择器来实现该功能。您只需使用不同类型的div而不是td元素来过滤产品

下面是使用jQuery选择元素的方法：

---

重写函数以使用引导中的缩略图div。jQuery中有足够的选择器来实现该功能。您只需使用不同类型的div而不是td元素来过滤产品

下面是使用jQuery选择元素的方法：

---

这是一个用JQuery编写的示例搜索代码。您需要添加几个类，以确保这对您有效。每个父div都应该有一个名为“parentClass”的类：

$（“#myInput”）.on（'keyup'，function（）{
$（“.parentClass”）.hide（）；
var enteredVal=$（this.val（）；
enteredVal=enteredVal.toUpperCase（）；
$（“.prodname”）。每个（函数（）{
变量prodName=$（this）.text（）；
prodName=prodName.toUpperCase（）；
如果（prodName.indexOf（enteredVal）>-1）{
$（this.parents（“.parentClass”）.show（）；
}
});
})；

化身}}“alt=”“>
化身}}“alt=”“>
化身}}“alt=”“>

这是一个用JQuery编写的示例搜索代码。您需要添加几个类，以确保这对您有效。每个父div应具有名为“parentClass”的类：

$（“#myInput”）.on（'keyup'，function（）{
$（“.parentClass”）.hide（）；
var enteredVal=$（this.val（）；
enteredVal=enteredVal.toUpperCase（）；
$（“.prodname”）。每个（函数（）{
变量prodName=$（this）.text（）；
prodName=prodName.toUpperCase（）；
如果（prodName.indexOf（enteredVal）>-1）{
$（this.parents（“.parentClass”）.show（）；
}
});
});

化身}}“alt=”“>
化身}}“alt=”“>
化身}}“alt=”“>