0

Searching Stack Overflow I was able to filter rows in real time, but I need to be more specific. Right now I'm using this code:

HTML:

<input type="text" id="search" placeholder="Write here to filter">

Script:

$(document).ready(function(){
    var $rows = $('#catalogo tbody tr');
    $rows.splice(0,1);
    $('#search').keyup(function() {
      var val = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase().split(' ');

      $rows.hide().filter(function() {
        var text = $(this).text().replace(/\s+/g, ' ').toLowerCase();
        var matchesSearch = true;
        $(val).each(function(index, value) {
          matchesSearch = (!matchesSearch) ? false : ~text.indexOf(value);
        });
        return matchesSearch;
      }).show();
});
});

Script based on this: How to perform a real time search and filter on a HTML table

What I would like to do is be able to have 4 different inputs, each one filtering first, second, third and fourth cells of each row (to be able to filter by title, author, year and max price). How could I acomplish this?

Community
  • 1
  • 1
Naggash
  • 11
  • 5

1 Answers1

0

Thanks to blackandorangecat's link I managed to put something together.

HTML:

<label class = "text">Título:<input type="text" id="stitulo" onkeyup="filter(this, 0)" style="margin: 0 auto;"/></label>
<label class = "text">Autor:<input type="text" id="sautor" onkeyup="filter(this, 1)" style="margin: 0 auto;"/></label>
<label class = "text">Año:<input type="text" id="sano" onkeyup="filter(this, 3)" size="1" style="margin: 0 auto;"/></label>
<label class = "text">Precio máximo:<input type="text" id="sprecio" onkeyup="filterNum(this, 4)" size="1" style="margin: 0 auto;"/></label>

JavaScript:

function filter(x, y) {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = x;
  filter = input.value.toUpperCase();
  table = document.getElementById("catalogo");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[y];
    if (td) {
      if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}

function filterNum(x, y) {
  // Declare variables 
  var input, filter, table, tr, td, i;
  input = x;
  if(input.value === "") {
      filter = 0.;
  } 
  else filter = parseFloat(input.value);
  table = document.getElementById("catalogo");
  tr = table.getElementsByTagName("tr");

  // Loop through all table rows, and hide those who don't match the search query
  for (i = 0; i < tr.length; i++) {
    td = tr[i].getElementsByTagName("td")[y];
    if (td) {
      if ((filter >= parseFloat(td.innerHTML)) || filter === 0) {
        tr[i].style.display = "";
      } else {
        tr[i].style.display = "none";
      }
    } 
  }
}

Hopefully this will help other people too.

Naggash
  • 11
  • 5