0

tenho uma tabela html que me permite filtrar a informação que quero.

EXEMPLO EM BAIXO

$(function(){
    $("#frontEndSearch input").keyup(function(){        
        var index = $(this).parent().index();
        var nth = "#frontEndSearch td:nth-child("+(index+1).toString()+")";
        var valor = $(this).val().toUpperCase();
        $("#frontEndSearch tbody tr").show();
        $(nth).each(function(){
            if($(this).text().toUpperCase().indexOf(valor) < 0){
                $(this).parent().hide();
            }
        });
    });
 
    $("#frontEndSearch input").blur(function(){
        $(this).val("");
    }); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="frontEndSearch">
    <thead>
        <tr>
            <th>Ref</th>
            <th>Descrição</th>
        </tr>
        <tr  >
         <th style="background-color:#FFF"><input type="text"id="txtColuna1"/></th>
         <th style="background-color:#FFF"><input type="text" id="txtColuna2"/></th>
   </tr> 
    </thead>
    <tbody>
  <tr>
 
        <td>REF 10/11</td>
    <td>FIO 31x20</td>

  </tr>
  <tr>
        <td>REF 11/12</td>
    <td>FIO 33x20</td>
 </tr>
 <tr>
        <td>REF 12</td>
    <td>FIO 35x22</td>
   </tr>
   <tr>
        <td>REF 13</td>
    <td>FIO 35x20</td>

 </tr>
 <tr>
        <td>REF 14</td>
    <td>FIO 35x21</td>

   </tr>    
   </tbody>
</table>

O filtro esta a funcionar mas queria ter a possibilidade de pesquisar da seguinte forma, por exemplo: %fio%20 e neste caso os resultados serem

FIO 31x20; FIO 31x20; FIO 33x20; FIO 35x20;

ou seja, mostra todos as linhas que contem a %fio e que contem %20;

como é que posso fazer isso? alguem tem ideia de como fazer?? desde ja obrigado.

1
  • A pessoa que pesquisar vai ter que digitar %fio%20 ou ela vai poder digitar fio 20 e é para pesquisar por um texto que tenha cada palavra digitada na pesquisa, similar à essa pergunta aqui?
    – Benilson
    7/10/2022 às 11:04

1 Resposta 1

0

Você pode transformar o texto digitado na pesquisa em um array de palavras usando o split.

Depois basta percorrer esse array de palavras com o each e fazer a verificação que já estava fazendo, só que agora para cada palavra do termo pesquisado.

Mais especificamente, pelo fato de não ter ficado muito claro como poderá ser feita a digitação da pesquisa, coloquei em um método que chamei de search, para poder definir o separador que será usado no método split, para gerar o array de palavras da pesquisa. No exemplo abaixo é só digitar normalmente usando espaços, mas poderia ser definido o % ou outro caractere qualquer.

$(function(){
    function search(separador) {
        $("#frontEndSearch input").keyup(function() {        
            var index = $(this).parent().index();
            var nth = "#frontEndSearch td:nth-child("+(index+1).toString()+")";
            var valor = $(this).val().toUpperCase();
            // já funcionaria, mas comentei para fazer um tratamento a mais para facilitar a pesquisa
            // var palavras = $.trim(valor).split(separador);
            // tratamento para o usuário ter mais maleabilidade para digitar
            var palavras = $.trim(valor).replace(new RegExp((separador + '+'), 'g'), separador).split(separador);            
            $("#frontEndSearch tbody tr").show();
            $(nth).each(function(){
                var td = this;
                $(palavras).each(function() {        
                    var palavra = this;
                    if($(td).text().toUpperCase().indexOf(palavra) < 0){
                        $(td).parent().hide();
                    }
                });
            });
        });
    }
 
    search(' ');
 
    $("#frontEndSearch input").blur(function(){
        $(this).val("");
    }); 
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="frontEndSearch">
    <thead>
        <tr>
            <th>Ref</th>
            <th>Descrição</th>
        </tr>
        <tr  >
         <th style="background-color:#FFF"><input type="text"id="txtColuna1"/></th>
         <th style="background-color:#FFF"><input type="text" id="txtColuna2"/></th>
   </tr> 
    </thead>
    <tbody>
  <tr>
 
        <td>REF 10/11</td>
    <td>FIO 31x20</td>

  </tr>
  <tr>
        <td>REF 11/12</td>
    <td>FIO 33x20</td>
 </tr>
 <tr>
        <td>REF 12</td>
    <td>FIO 35x22</td>
   </tr>
   <tr>
        <td>REF 13</td>
    <td>FIO 35x20</td>

 </tr>
 <tr>
        <td>REF 14</td>
    <td>FIO 35x21</td>

   </tr>    
   </tbody>
</table>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .