Search with Jquery filter

Asked

Viewed 112 times

0

I have a Select, and a search field, which searches everything within a table.

<select class="custom-select col-12" id="selecionarOrgao">
   <option value="">Escolha o órgão</option>
    <option value="2">portaria</option>
    <option value="3">Vidraçaria</option>
</select>
<div class="input-group">
    <input class="form-control input-search" placeholder="Digite aqui sua pesquisa." id="buscarServico" name="buscarServico" value="" type="text" />
</div>

This is my table:

<table  id="servico" class="table table-hover table-click lista-servicos">
    <thead>
        <tr>
            <th scope="col">Serviço</th>
            <th scope="col">Descrição</th>
            <th class="" scope="col">Órgão</th>
        </tr>
    </thead>
    <tbody>
          <tr data-cod="3">
            <td>
               Vidro
            </td>
            <td>
               Concerto de porta de vidro
            </td>
            <td class="">
               Vidraçaria
            </td>
        </tr>
        <tr data-cod="10">
            <td>
                Concerto de porta
            </td>
            <td>
              Concertar portas de todos os modelos, exceto porta de vidro
            </td>
            <td class="">
                Portaria
            </td>
        </tr>
    </tbody>
</table>

I have these two scripts, one is to filter by search, according to what the user type, and the other is for select, search only the results according to the chosen, in select, search by code, which is in the data-cod of <tr>.

Filter by typed Search:

<script>
var $rows = $('#servico tr');
$('#buscarServico').keyup(function () {
    var parametroDeBusca = $.trim($(this).val()).replace(/ +/g, ' ').toLowerCase();
    parametroDeBusca = RemoverAcentos(parametroDeBusca);
    if (parametroDeBusca.length >= 3) {
        $rows.show().filter(function () {
            var textoDaLinhaDaTabela = $(this).text().replace(/\s+/g, ' ').toLowerCase();
            textoDaLinhaDaTabela = RemoverAcentos(textoDaLinhaDaTabela);
            return !~textoDaLinhaDaTabela.indexOf(parametroDeBusca);
        }).hide();
    } else {
        $rows.show().filter(function () {
        }).show();
    }
});

function RemoverAcentos(textoDaLinha) {
    textoDaLinha = textoDaLinha.replace(/[áàãâä]/gi, "a");
    textoDaLinha = textoDaLinha.replace(/[éèê]/gi, "e");
    textoDaLinha = textoDaLinha.replace(/[íìïî]/gi, "i");
    textoDaLinha = textoDaLinha.replace(/[óòöôõ]/gi, "o");
    textoDaLinha = textoDaLinha.replace(/[úùüû]/gi, "u");
    textoDaLinha = textoDaLinha.replace(/[ç]/gi, "c");
    textoDaLinha = textoDaLinha.replace(/[ñ]/gi, "n");

    return textoDaLinha.replace(/[^a-zA-Z0-9]/g, " ");
}
</script>

Select according to the selected organ:

<script>
  var filterTable = function (item) {
      // Get the value of the select box
      var val = item.val();

      // Show all the rows
      $('tbody tr').show();

      // If there is a value hide all the rows except the ones with a data-cod of that value
      if (val) {
          $('tbody tr').not($('tbody tr[data-cod="' + val + '"]')).hide();
      }
  }


  $('select').on('change', function (e) {
      // On change fire function
      filterTable($(this));
  });

  // Fire function on load
  filterTable($('select'));
</script>

The problem is that the way it shows there, after I select the organ, and do a search, it brings me all the results, even those that are not from the organ that I selected. that is, even with the <tr> in Hide, appears in the results. as I do, to search according to what I type only in the results of the selected organ???

  • It may not be useful for you, but it has a lib since it makes many of these features already ready, the lib is Datatable. Take a look and see if there’s anything you can do.

2 answers

1

Try it like this: Add one class to all <tr>, to be more specific:

<tr data-cod="3" class="filter-rows">
  <td>
    Vidro
  </td>
  <td>
    Concerto de porta de vidro
  </td>
  <td>
    Vidraçaria
  </td>
</tr>

Change your filter function to make it hide everything first and then just show what you want/need:

var filterTable = function (item) {
  var val = item.val();

  $('.filter-rows').hide();
  $('.fiter-rows [data-cod="' + val + '"]').show();
}
  • 1

    Thanks for the answer, but still, keep searching for everything.

0

Change the function to:

function filterTable (item) {
    var val = item.val();

    $('.filter-rows').hide();
    $('.filter-rows[data-cod="'+val+'"]').show();
}

Testing and running: https://the-cyberpunk.com/exemplo/

You can also add an if, so if the person goes back to the "Choose an option", it shows all again:

function filterTable (item) {
    var val = item.val();

    if(val.length > 0) {
        $('.filter-rows').hide();
        $('.filter-rows[data-cod="'+val+'"]').show();
    } else {
        $('.filter-rows').show();
    }
}

Browser other questions tagged

You are not signed in. Login or sign up in order to post.