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.
– Robson Silva