Search with Jquery filter

Question

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???

Answer 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();
}

Answer 2

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();
    }
}