-1

Alguém pode me ajudar, com alguma dica?

Tenho o código abaixo que pesquisa o parágrafo, mas o problema é quando não adicionamos o texto corretamente na caixa de pesquisa (com maiúscula, minúscula e acentos - conforme esta descrito no parágrafo).

$("#textFind").keyup(function(){
    var stringPesquisa = $(this).val();
    $('p').parent().hide();
    $('p:contains('+stringPesquisa+')').parent().show()
  });
div{
  margin: 10px;
  border: 1px solid #333;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="textFind">
<br>
<div id="div01" style="">
  <h2> Título 1 </h2>
  <p> Esse texto está aqui para ser pesquisado.</p>
  <p> Esse outro texto também vai ser pesquisado.</p>
  <p> Texto que vai ser que o usuário vai pesquisar digitando no input.</p>
</div>
<div id="div02" style="">
  <h2> Título 2 </h2>
  <p> esse parágrafo deve aparecer se o texto digitado estiver nessa div.</p>
  <p> esse outro parágrafo vai obedece ao mesmo critério.</p>
  <p> o usuário vai digitar no input e essa div deve aparecer.</p>
</div>

2 Respostas 2

1

O que você pode fazer é transformar os caracteres maiúsculos em minúsculos ou vice-versa em ambos os casos para a comparação. Com relação aos acentos, você pode substituí-los utilizando uma regex. Você precisaria passar os valores dos parágrafos nos textos e comparar um a um.

$("#textFind").keyup(function(){
    
    // deixamos a string de pesquisa em minúscula
    var stringPesquisa = $(this).val().toLowerCase();

    // removemos os acentos da string de pesquisa
    stringPesquisa = replaceAccents(stringPesquisa);
    
    // escondemos o conteúdo
    $('p').parent().hide();
    
    // executamos a busca por parágrafo e por título
    $('p').each(forEachHandler);
    $('h2').each(forEachHandler);
    
    // essa função vai receber os valores dos parágrafos e dos títulos
    function forEachHandler() {

          // recuperamos o valor da string do parágrafo/título e deixamos em minúsculo
          var stringP = $(this).text().toLowerCase();
          
          // removemos os acentos
          stringP = replaceAccents(stringP);

           // efetuamos a pesquisa
           if(stringP.search(stringPesquisa) >= 0) {
              $(this).parent().show();
           }

     }
    
  });
  
  // essa função receberá uma string e retornará a mesma string sem os acentos
  function replaceAccents(string) {
  
     return string != null ? string.replace(/[áàãâä]/gi,"a")
            .replace(/[éè¨ê]/gi,"e")
            .replace(/[íìïî]/gi,"i")
            .replace(/[óòöôõ]/gi,"o")
            .replace(/[úùüû]/gi, "u")
            .replace(/[ç]/gi, "c")
            .replace(/[ñ]/gi, "n")
            .replace(/[^a-zA-Z0-9]/g," ") : "";
            
  }
div{
  margin: 10px;
  border: 1px solid #333;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="text" id="textFind">
<br>
<div id="div01" style="">
  <h2> Título 1 </h2>
  <p> Esse texto está aqui para ser pesquisado.</p>
  <p> Esse outro texto também vai ser pesquisado.</p>
  <p> Texto que vai ser que o usuário vai pesquisar digitando no input.</p>
</div>
<div id="div02" style="">
  <h2> Título 2 </h2>
  <p> esse parágrafo deve aparecer se o texto digitado estiver nessa div.</p>
  <p> esse outro parágrafo vai obedece ao mesmo critério.</p>
  <p> o usuário vai digitar no input e essa div deve aparecer.</p>
</div>

O trecho de código da RegEx foi tirado dessa resposta do SOen. Só fiz algumas alterações no código, talvez você deva deixá-lo mais performático.

3
  • Para utilizar no título (também), vou ter que adicionar todo o replace para ele?
    – user176334
    Commented 30/01/2020 às 17:25
  • 1
    Eu editei a resposta. Criei algumas funções para evitar esses códigos duplicados e adicionei a procura por título também, procurando pela tag h2. Também adicionei alguns comentários para você entender melhor o que o código está fazendo.
    – bio
    Commented 30/01/2020 às 17:43
  • obrigado, grande ajuda...
    – user176334
    Commented 30/01/2020 às 23:58
-1

As pesquisas estão bombando (funcionando) apenas nas tags p, seta pro seu h2 também.

Deve ser algo assim:

$("#textFind").keyup(function(){
    var stringPesquisa = $(this).val();
    $('p').parent().hide();
    $('p:contains('+stringPesquisa+')').parent().show()
    //insere aqui > algo assim
    $('h2:contains('+stringPesquisa+')').parent().show()
});

1
  • obrigado, grande ajuda
    – user176334
    Commented 2/02/2020 às 1:40