Blog do Adriano Meira - Uma ajudinha para desenvolvedores e web designers. Uma ajudinha para desenvolvedores e web designers.

Selecionando texto em uma página com jQuery

E ae pessoal, beleza? Esse é o meu primeiro post aqui nesse site desse grande web designer que é o Adriano meu brother do trampo.

Seguinte, eu tinha a seguinte missão, criar um mega-menu, só que ele iria ter muita, muita informação mesmo, ia tipo ocupar a página inteira, o Adriano deu a ideia de colocar um campo para pesquisa de texto dentro desse mega-menu, o que eu achei fantástico porém sem saber a solução.

Depois de um bom tempo da proposta dessa ideia, peguei um livro de jQuery que eu já tinha a um bucado de tempo, por falar nisso podem comprar é muito bom mesmo, é da Novatec e chama-se jQuery, A Biblioteca do Programador JavaScript de Maurício Samy Silva (dono do site Maujor.com). Link para o livro: http://novatec.com.br/livros/jquery2/.

E este livro contém um capítulo apenas para seletores, dentre estes um mi chamou muito a atenção: o seletor seletorjQuery:contains(texto). Onde seletorjQuery seria o atributo dentro do qual você iria procurar, por exemplo $(‘#divExemplo’); :contains(texto) é uma função exclusiva da biblioteca jQuery e não é prevista na CSS3, que procura dentro do seletorjQuery qualquer ocorrência do texto digitado.

Bem vamos a um exemplo prático, que eu acho que será auto explicativo. Para que você possa executar esta pesquisa de conteúdo você só precisará da biblioteca jQuery, pura e simples.

Antes de qualquer execução de script jQuery, chame o jQuery…

<script type="text/javascript" src="jQuery.js"></script>

Agora que o seu jQuery está pronto para ser executado vamos criar uma table (Sou programador viu gente… me condena não… table salva minha vida até hoje) com um id tableFind que usaremos para pesquisar o texto, e um campo input text com id textFind onde digitaremos o texto a ser localizado.

<input type="text" id="textFind" />
<table id="tableFind">
  <tr>
    <td>faca</td>
    <td>bolo</td>
  </tr>
  <tr>
    <td>tempo</td>
    <td>dinheiro</td>
  </tr>
  <tr>
    <td>pão</td>
    <td>manteiga</td>
  </tr>
</table>

Depois desta bela table criada iremos gerar o código jQuery responsável pela busca. É importante ressaltar que assim como o JavaScript puro deve ser lido apenas depois do carregamento de toda a página com o metodo window.onload = function(){} o jQuery também deve seguir o mesmo raciocionio porém com duas formas básicas de se escrever a sintaxe:

A forma completa:

$(document).ready(function()
{
   ...faça isso...
});

e a forma reduzida:

$(function()
{
   ...faça isso...
});

Ambos os exemplos funcionam perfeitamente porém o primeiro possui um dom auto explicativo em sua página. Por este motivo usarei a forma completa de escrita.

Vou mostrar o código depois explico ele linha por linha:

<script>
  $(document).ready(function()
  {
    $("#textFind").keyup(function()
    {
      stringPesquisa = $("#textFind").val();
      $('table#tableFind tr td').css("background","");
      $('table#tableFind tr td:contains('+stringPesquisa+')').css("background","#FFFF00");
    });
  });
</script>

Acho que vocês já intenderam a essência do código, mas vamos lá. Estou usando o evento keyup do jQuery (em JavaScript puro é o evento onKeyUp, ele é acionado toda vez que eu seguro e solto uma tecla), que pega  o valor atual do meu input e o coloca dentro da variavel stringPesquisa.

Posteriormente eu localizo todos os td, dentro de tr, dentro de uma table com id tableFind e zero a sua propriedade background. Esta parte da função é extremamente importante para que eu possa realizar várias pesquisas a cada toque. Pois ela anulará a pesquisa do texto anterior e localizará o novo texto, dando dinamismo à pesquisa.

Agora começa o seletor :contains. Logo após localizo todos os td, dentro de tr, dentro de uma table com id tableFind que contém o texto digitado no input e adiciono a cor #FFFF00 (Amarelo/yellow) ao seu background, dando um efeito de marca texto.

Esse é o link para o exemplo funcionando:

Gente esse foi o meu primeiro post estou grato de mais pela oportunidade e espero que tenha sido util para vocês… Abraços…




Adriano Meira é o criador do blog, trabalha desde 2012 como Webdesigner e hoje formado em design gráfico trabalho para a Brasil na Web e como free-lancer nas áreas de Design para Web (Webdesigner), Design Gráfico, Impressos e criação de marcas.

Comente este artigo você também!

Comentários (8)

  • Alessandro Gonzalez disse:

    Muito interessante,
    Parabéns pelo post.

  • Alex disse:

    Cara muito bom o teu exemplo!
    Porém saberia me dizer se tem como a tela acompanhar a palavra?
    Com se fosse uma pesquisa do navegador..
    Obrigado!

  • Adriano Meira disse:

    Oi ALex, fico feliz em ter te ajudado. Sobre o campo ser como no navegador tem como sim, ao invés de usar largura em pixel (px) use com porcentagem (%). Se quiser algo mais complexo vocE^pode pegar a largura do navegador com javascript e setar esta largura no campo de texto.

    Até mais.

  • Alex disse:

    Na verdade amigo eu precisava que o scroll acompanhasse a palavra, por exemplo, se o texto estiver abaixo do tamanho da tela, quando é pesquisado ele não aparece. Não se se expliquei corretamente… Valeu pelas dicas!

  • Fernanda disse:

    Olá Adriano, talvez você saiba me ajudar.
    Estou seguindo os teus exemplos para fazer a busca usando jquery, e gostaria que o texto que estivesse sendo procurado – como o exemplo deste post – mudasse a cor de fundo.
    Quando uso o teu exemplo, a cor de fundo da linha inteira muda, e não somente da palavra.

    Poderia me ajudar?

    Obrigada.

  • Marcelo Alves disse:

    Fantástico, gostei muito da ideia parabéns.

    abraço

  • Salomão Neto disse:

    Muito bom o post!
    Mas tenho uma dúvida:
    Se eu quisesse ocultar os itens que não foram marcados pela busca e deixar só os que foram encontrados?

  • Adriano Meira disse:

    Olá Salomão

    Para sua ideia o ideal seria usar a função keyup do jQuery, veja neste outro artigo que fiz http://www.adrianomeira.com/blog/buscar-conteudo-na-pagina-funcao-keyup-do-jquery

    Até mais!

Publicidade e outros

Marcadores de Página Magnético

 

Leia e Liberte pelo BookCrossing.com ...