Question

我创建了一个具有搜索功能的表，但是如果我在输入中编写产品标题，那么它将仅显示该产品，并且所有其他项目将被隐藏。但现在我有另一个页面，其中所有产品都有bootstrap缩略图样式（不使用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>

使用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";
  }
} 
}
}

Answer 1

重写函数以使用Bootstrap中的缩略图div。 jQuery中有足够的选择器来实现这一点。您只需使用不同类型的div而不是td-Elements来过滤产品。

这是使用jQuery选择元素的doumentation： jQuery Selectors

Answer 2

以下是用JQuery编写的示例搜索代码。您需要添加几个类，以确保它适合您。每个父div应该有一个名为'parentClass'的类：

$("#myInput").on('keyup', function() {
  $(".parentClass").hide();
  var enteredVal = $(this).val();
  enteredVal = enteredVal.toUpperCase();
  $(".prodname").each(function() {
    var prodName = $(this).text();
    prodName = prodName.toUpperCase();
    if (prodName.indexOf(enteredVal) > -1) {
      $(this).parents(".parentClass").show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
  <input type="text" id="myInput" placeholder="Keresés..">
</div>

<div class="osszterm" id="prodsearch">

  <div class="col-sm-4 col-md-2 parentClass" id="prodid">
    <div class="thumbnail">
      <img src="/avatars/{{ $product->avatar }}" alt="">
      <div class="caption">
        <a href="#">
          <h3 class="prodname"> Apple</h3>
        </a>
      </div>
    </div>
  </div>
  <div class="col-sm-4 col-md-2 parentClass" id="prodid">
    <div class="thumbnail">
      <img src="/avatars/{{ $product->avatar }}" alt="">
      <div class="caption">
        <a href="#">
          <h3 class="prodname"> Banana</h3>
        </a>
      </div>
    </div>
  </div>
  <div class="col-sm-4 col-md-2 parentClass" id="prodid">
    <div class="thumbnail">
      <img src="/avatars/{{ $product->avatar }}" alt="">
      <div class="caption">
        <a href="#">
          <h3 class="prodname"> Mango</h3>
        </a>
      </div>
    </div>
  </div>

</div>

javascript搜索功能

2 个答案: