Skip to main content
Editei para ele buscar pelo título também
Fonte Link
bio
  • 2,7mil
  • 2
  • 17
  • 36
$("#textFind").keyup(function(){
    
    // deixamos a string de pesquisa em minúscula
    var stringPesquisa = $(this).val().toLowerCase(); 

    // removemos os acentos da string de pesquisa
    stringPesquisa = stringPesquisa.replacereplaceAccents(/[áàãâä]/gi,"a"stringPesquisa);
        
    // escondemos o conteúdo
    $('p').replaceparent(/[éè¨ê]/gi,"e").hide();
     
    // executamos a busca por parágrafo e por título
    $('p').replaceeach(/[íìïî]/gi,"i"forEachHandler);
    $('h2').each(forEachHandler);
     
    // essa função vai receber os valores dos parágrafos .replace(/[óòöôõ]/gi,"o")
e dos títulos
    function forEachHandler() {

          .replace(/[úùüû]/gi, "u")
recuperamos o valor da string do parágrafo/título e deixamos em minúsculo
          var stringP = $(this).replacetext(/[ç]/gi, "c").toLowerCase();
           
        .replace(  /[ñ]/gi, "n")removemos os acentos
          stringP = replaceAccents(stringP);

       .replace(    /[^a-zA-Z0-9]/g," ")efetuamos a pesquisa
    
     $   if('p')stringP.parentsearch(stringPesquisa).hide( >= 0); {
    
           $('p'this).eachparent(function).show(){;
           }

     }
   var stringP 
 = $(this).text().toLowerCase(});
  
  // essa função receberá uma string e retornará a mesma string sem os acentos
  function replaceAccents(string) {
   
     return stringPstring != stringPnull ? 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," ");
                  
         if(stringP.search(stringPesquisa) >= 0) {
            $(this).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>
$("#textFind").keyup(function(){
    
    var stringPesquisa = $(this).val().toLowerCase();
    stringPesquisa = stringPesquisa.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," ")
    
     $('p').parent().hide();
    
     $('p').each(function(){
        
        var stringP = $(this).text().toLowerCase();
        
        stringP = stringP.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," ");
                  
         if(stringP.search(stringPesquisa) >= 0) {
            $(this).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>
$("#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>
Fonte Link
bio
  • 2,7mil
  • 2
  • 17
  • 36

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(){
    
    var stringPesquisa = $(this).val().toLowerCase();
    stringPesquisa = stringPesquisa.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," ")
    
    $('p').parent().hide();
    
    $('p').each(function(){
        
        var stringP = $(this).text().toLowerCase();
        
        stringP = stringP.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," ");
                  
         if(stringP.search(stringPesquisa) >= 0) {
            $(this).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>

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.