CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
Dodo
Dodo

Reputation: 141

javascript search function

I created a table with search function which works, so if I write the product title in input then it will show only this product and all other items will be hidden. But now I have another page where there are all products with bootstrap thumbnail style (without using table, tr and td) and I tried to do this search function here too, but it does not work. I am totally beginner in Javascript/Jquery. Can anyone help me, please? This is the page:

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

Upvotes: 0

Views: 137

Answers (2)

Milan Chheda
Milan Chheda

Reputation: 8249

Here is a sample search code written in JQuery. You need to add few classes so as to ensure this works for you. Each parent div should have class named '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>

Upvotes: 1

Torsten Barthel
Torsten Barthel

Reputation: 3458

Rewrite the function to use the thumbnail divs from Bootstrap. There are enough selectors in jQuery to get that working. You just use the different kind of divs instead of the td-Elements to filter the products.

Here ist the doumentation for selecting elements with jQuery: jQuery Selectors

Upvotes: 1

Related Questions