SlideShare uma empresa Scribd logo
1 de 5
Introdução
Sabemos que a principal forma de listagem de dados detalhados em páginas web é usando tabelas, e é este a
real função desse tipo de elemento. Porém, devemos estar prontos para lidar com diversos tipos de situações
que surgem em nosso dia-a-dia e saber aproveitar todos os recursos das ferramentas de que dispomos para
atingir o resultado desejado.


Em páginas web para dispositivos móveis, por exemplo, é comum encontrarmos dados sendo exibidos em listas
<UL> e <OL>, portanto, é preciso saber como manipular essas estruturas, a fim de se adequar às novas
tendências do desenvolvimento web.


Muitas vezes são apresentadas, para o usuário, grandes quantidades de dados que este precisa filtrar para
localizar somente a informação desejada. Em algumas situações, para evitar o envio de várias requisições
seguidas para o servidor, com o intuito de realizar uma pesquisa no banco de dados e retornar apenas os
registros pesquisados, pode ser interessante realizar esse filtro diretamente no lado do cliente. Isso implica em
utilizar tecnologias front-end, ou seja, HTML, CSS e Javascript para filtrar as informações diretamente na
página, considerando que há uma lista extensa exibida.


Neste artigo será apresentada uma solução simples, de fácil compreensão e implementação para filtrar uma
lista <UL> (também aplicável a <OL>) utilizando Javascript, mais especificamente usando a biblioteca jQuery.


O código HTML
Como o objetivo aqui é enfatizar no filtro realizado sobre uma lista, não serão abordados detalhes de design ou
acesso a bases de dados. Apenas será utilizada uma estrutura HTML básica, sobre a qual será aplicada uma
simples folha de estilo apenas para dar à página um visual mais “agradável”.


Listagem 1: Código HTML da página


1 <!DOCTYPE HTML>
   <html lang="pt-br">
2 <head>
3      <meta charset="UTF-8"/>
4      <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js">
5      <style>
       *{
6          font-family:"Century Gothic", Arial;
7          font-size:20px
8      }
9      input[type="text"]{
           width:100%;
10         border:solid 1px
11     }
12
13     ul{
14         padding:0;;
15         margin:0
       }
16
17     ul li{
18         list-style:none;
19         border:dashed 1px;
20         padding:5px
21     }
       </style>
22</head>
23<body>
24     Filtrar lista:<br/>
25     <input type="text" id="txtBusca" placeholder="Digite aqui um valor para filtrar..
       <ul id="ulItens">
26
           <li>Feijão</li>
27         <li>Arroz</li>
28        <li>Farinha</li>
29        <li>Açúcar</li>
          <li>Macarrão</li>
30    </ul>
31</body>
32</html>
33
34
35
36
37
38
39

Salvando o conteúdo da Listagem 1 em arquivo de extensão .html, obtemos o resultado apresentado na figura
a seguir.




Figura 1: Página aberta no browser


O código Javascript (jQuery)
Tendo montado a estrutura, o próximo passo é implementar o código Javascript, utilizando a sintaxe jQuery.


Observação: é importante obervar que foi feita referência à biblioteca jQuery no cabeçalho do arquivo HTML.
Essa referência (tag na quinta linha) é necessária para que possamos utilizar as funções dessa biblioteca no
restante do código.


O código da Listagem 2, a seguir, é o responsável por implementar o filtro sobre a lista “ulItens”. Ele deve ser
inserido abaixo da tag que faz referência à biblioteca jQuery.
Listagem 2: Código Javascript para implementar o filtro


1
2 <script type="text/javascript">
3 $(function(){
      $("#txtBusca").keyup(function(){
4         var texto = $(this).val();
5
6         $("#ulItens li").css("display", "block");
7         $("#ulItens li").each(function(){
8              if($(this).text().indexOf(texto) < 0)
9                 $(this).css("display", "none");
          });
10    });
11});
12</script>
13

Abaixo têm-se uma explicação detalhada de cada linha do código acima, visando facilitar o entendimento do
leitor.


Linhas 1 e 13: abertura e fechamento da tag <script> que contém o código Javascript a ser interpretado no
momento do carregamento da página. Diferente da referência à jQuery, nesse caso não foi necessário definir o
atributo “src”, pois o conteúdo não encontra-se em um arquivo externo, mas sim dentro das próprias tags.


Linhas 2 e 12: abertura e fechamento da função geral da jQuery, que trata o evento ready do documento.
Este evento é um “substituto” do tradicional load da linguagem Javascript. O ready, porém, é executado só
após o DOM ter sido inteiramente carregado, evitando erros que comumente ocorrem devido aos elementos
não terem sido totalmente carregados quando o script é executado. Para maiores informações sobre o ready, é
indicado acessar a documentação oficial no link http://api.jquery.com/ready/.


Linhas 3 e 11: abertura e fechamento da função que tratará o evento keyup do input onde se digitará o valor
a ser usado como filtro. Esse evento foi utilizado para que o filtro seja feito sempre que uma tecla for
pressionada e solta. Dessa forma, mesmo após ter sido digitada apenas um caracter, ao soltar a tecla o filtro
será realizado.


Linha 4: nessa linha se obtém o valor digitado no input e o atribui a uma variável chamada “texto”, para ser
usada posteriormente. Nesse nível, o operador “this” refere-se ao próprio input que está disparando o evento. A
função val() é a responsável por recuperar o valor digitado na caixa de texto e está contida na biblioteca
jQuery.


Linha 6: a propriedade CSS display de todos os itens (<li>) da lista seja alterada para “block”. Com isso, todos
os itens tornam-se visíveis.


Linhas 7 e 10: abertura e fechamento da função que tratará cada item da lista, quando esta for percorrida
para que se realize o filtro. A função each da jQuery dá acesso a todos os elementos de uma lista (lista de
elementos, não necessariamente UL ou OL).


Linha 8: nessa linha verifica-se se o item da lista acessado na iteração atual da função each contém o texto
digitado no input. Agora o operador this refere-se ao item (<li>) e não mais ao input, pois a função each é
mais interna que a função keyup. Nesse caso foi utilizada a função text() para acessar o texto do item, e não a
val(), pois esta é usada para valor inseridos em elementos de formulário como inputs e checkboxes. A
função indexOf retorna -1 se o texto for localizado ou um valor maior indicando a posição do texto buscado no
conteúdo do item, caso seja localizado. É de nosso interesse, nessa situação, verificar se o texto NÃO foi
localizado, pois assim faremos com que o item seja ocultado.


Linha 9: caso o item não contenha o texto buscado (verificado na linha anterior), ele é então ocultado. Isso é
feito definindo sua propriedade CSS display como “none”.


A seguir temos um exemplo de filtro realizado digitando-se as letras “ar” no input. Nota-se que os itens “Feijão”
e “Arroz” foram ocultados por não conter esse texto.
Figura 2: Exemplo de filtro


Observa-se, porém, que o item “Arroz” contém sim as letras “ar”, mas com o “A” maiúsculo. O filtro está
considerando a diferença entre letras maiúsculas e minúsculas, o que em muitos casos pode não ser
interessante. Isso pode ser facilmente contornado convertendo ambos os lados da comparação (o texto do item
e o texto buscado) para maiúsculo ou minúsculo.


A seguir temos as duas linhas centrais da Listagem 2 modificadas para implementar um filtro “case insensitive”,
ou seja, sem diferenciar maiúsculas de minúsculas. Foi utilizada, para isso, a função toUpperCase da Javascript
para converter tudo para maiúsculo. O mesmo resultado seria obtido utilizando a função toLowerCase, que
converte tudo para minúsculo.


Listagem 3: Modificação no filtro para torná-lo case insensitive


1if($(this).text().toUpperCase().indexOf(texto.toUpperCase()) < 0)
2 $(this).css("display", "none");

Agora, digitando novamente as letras “ar”, apenas o item “Feijão” é ocultado por realmente não conter esse
texto, como se vê na Figura 3.
Figura 3: Filtro case insensitive


Conclusão
Vimos que implementar um filtro sobre uma lista é consideravelmente simples quando utilizamos os recursos
da biblioteca jQuery. O desempenho do filtro também é satisfatório, pois ele é realizado do lado cliente,
utilizando os recursos do browser, sem requisições ao servidor.


Obviamente o código apresentado aqui é útil quando se tem uma lista previamente montada e exibida na
página, pois caso fosse necessário realizar consulta a um banco de dados, Javascript não seria o bastante.


Caso surjam dúvidas a respeito do conteúdo aqui apresentado, a seção de comentários, abaixo, está aberta.


Até o próximo artigo.

Mais conteúdo relacionado

DevMedia - Filtrando listas HTML com jQuery

  • 1. Introdução Sabemos que a principal forma de listagem de dados detalhados em páginas web é usando tabelas, e é este a real função desse tipo de elemento. Porém, devemos estar prontos para lidar com diversos tipos de situações que surgem em nosso dia-a-dia e saber aproveitar todos os recursos das ferramentas de que dispomos para atingir o resultado desejado. Em páginas web para dispositivos móveis, por exemplo, é comum encontrarmos dados sendo exibidos em listas <UL> e <OL>, portanto, é preciso saber como manipular essas estruturas, a fim de se adequar às novas tendências do desenvolvimento web. Muitas vezes são apresentadas, para o usuário, grandes quantidades de dados que este precisa filtrar para localizar somente a informação desejada. Em algumas situações, para evitar o envio de várias requisições seguidas para o servidor, com o intuito de realizar uma pesquisa no banco de dados e retornar apenas os registros pesquisados, pode ser interessante realizar esse filtro diretamente no lado do cliente. Isso implica em utilizar tecnologias front-end, ou seja, HTML, CSS e Javascript para filtrar as informações diretamente na página, considerando que há uma lista extensa exibida. Neste artigo será apresentada uma solução simples, de fácil compreensão e implementação para filtrar uma lista <UL> (também aplicável a <OL>) utilizando Javascript, mais especificamente usando a biblioteca jQuery. O código HTML Como o objetivo aqui é enfatizar no filtro realizado sobre uma lista, não serão abordados detalhes de design ou acesso a bases de dados. Apenas será utilizada uma estrutura HTML básica, sobre a qual será aplicada uma simples folha de estilo apenas para dar à página um visual mais “agradável”. Listagem 1: Código HTML da página 1 <!DOCTYPE HTML> <html lang="pt-br"> 2 <head> 3 <meta charset="UTF-8"/> 4 <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"> 5 <style> *{ 6 font-family:"Century Gothic", Arial; 7 font-size:20px 8 } 9 input[type="text"]{ width:100%; 10 border:solid 1px 11 } 12 13 ul{ 14 padding:0;; 15 margin:0 } 16 17 ul li{ 18 list-style:none; 19 border:dashed 1px; 20 padding:5px 21 } </style> 22</head> 23<body> 24 Filtrar lista:<br/> 25 <input type="text" id="txtBusca" placeholder="Digite aqui um valor para filtrar.. <ul id="ulItens"> 26 <li>Feijão</li> 27 <li>Arroz</li>
  • 2. 28 <li>Farinha</li> 29 <li>Açúcar</li> <li>Macarrão</li> 30 </ul> 31</body> 32</html> 33 34 35 36 37 38 39 Salvando o conteúdo da Listagem 1 em arquivo de extensão .html, obtemos o resultado apresentado na figura a seguir. Figura 1: Página aberta no browser O código Javascript (jQuery) Tendo montado a estrutura, o próximo passo é implementar o código Javascript, utilizando a sintaxe jQuery. Observação: é importante obervar que foi feita referência à biblioteca jQuery no cabeçalho do arquivo HTML. Essa referência (tag na quinta linha) é necessária para que possamos utilizar as funções dessa biblioteca no restante do código. O código da Listagem 2, a seguir, é o responsável por implementar o filtro sobre a lista “ulItens”. Ele deve ser inserido abaixo da tag que faz referência à biblioteca jQuery.
  • 3. Listagem 2: Código Javascript para implementar o filtro 1 2 <script type="text/javascript"> 3 $(function(){ $("#txtBusca").keyup(function(){ 4 var texto = $(this).val(); 5 6 $("#ulItens li").css("display", "block"); 7 $("#ulItens li").each(function(){ 8 if($(this).text().indexOf(texto) < 0) 9 $(this).css("display", "none"); }); 10 }); 11}); 12</script> 13 Abaixo têm-se uma explicação detalhada de cada linha do código acima, visando facilitar o entendimento do leitor. Linhas 1 e 13: abertura e fechamento da tag <script> que contém o código Javascript a ser interpretado no momento do carregamento da página. Diferente da referência à jQuery, nesse caso não foi necessário definir o atributo “src”, pois o conteúdo não encontra-se em um arquivo externo, mas sim dentro das próprias tags. Linhas 2 e 12: abertura e fechamento da função geral da jQuery, que trata o evento ready do documento. Este evento é um “substituto” do tradicional load da linguagem Javascript. O ready, porém, é executado só após o DOM ter sido inteiramente carregado, evitando erros que comumente ocorrem devido aos elementos não terem sido totalmente carregados quando o script é executado. Para maiores informações sobre o ready, é indicado acessar a documentação oficial no link http://api.jquery.com/ready/. Linhas 3 e 11: abertura e fechamento da função que tratará o evento keyup do input onde se digitará o valor a ser usado como filtro. Esse evento foi utilizado para que o filtro seja feito sempre que uma tecla for pressionada e solta. Dessa forma, mesmo após ter sido digitada apenas um caracter, ao soltar a tecla o filtro será realizado. Linha 4: nessa linha se obtém o valor digitado no input e o atribui a uma variável chamada “texto”, para ser usada posteriormente. Nesse nível, o operador “this” refere-se ao próprio input que está disparando o evento. A função val() é a responsável por recuperar o valor digitado na caixa de texto e está contida na biblioteca jQuery. Linha 6: a propriedade CSS display de todos os itens (<li>) da lista seja alterada para “block”. Com isso, todos os itens tornam-se visíveis. Linhas 7 e 10: abertura e fechamento da função que tratará cada item da lista, quando esta for percorrida para que se realize o filtro. A função each da jQuery dá acesso a todos os elementos de uma lista (lista de elementos, não necessariamente UL ou OL). Linha 8: nessa linha verifica-se se o item da lista acessado na iteração atual da função each contém o texto digitado no input. Agora o operador this refere-se ao item (<li>) e não mais ao input, pois a função each é mais interna que a função keyup. Nesse caso foi utilizada a função text() para acessar o texto do item, e não a val(), pois esta é usada para valor inseridos em elementos de formulário como inputs e checkboxes. A função indexOf retorna -1 se o texto for localizado ou um valor maior indicando a posição do texto buscado no conteúdo do item, caso seja localizado. É de nosso interesse, nessa situação, verificar se o texto NÃO foi localizado, pois assim faremos com que o item seja ocultado. Linha 9: caso o item não contenha o texto buscado (verificado na linha anterior), ele é então ocultado. Isso é feito definindo sua propriedade CSS display como “none”. A seguir temos um exemplo de filtro realizado digitando-se as letras “ar” no input. Nota-se que os itens “Feijão” e “Arroz” foram ocultados por não conter esse texto.
  • 4. Figura 2: Exemplo de filtro Observa-se, porém, que o item “Arroz” contém sim as letras “ar”, mas com o “A” maiúsculo. O filtro está considerando a diferença entre letras maiúsculas e minúsculas, o que em muitos casos pode não ser interessante. Isso pode ser facilmente contornado convertendo ambos os lados da comparação (o texto do item e o texto buscado) para maiúsculo ou minúsculo. A seguir temos as duas linhas centrais da Listagem 2 modificadas para implementar um filtro “case insensitive”, ou seja, sem diferenciar maiúsculas de minúsculas. Foi utilizada, para isso, a função toUpperCase da Javascript para converter tudo para maiúsculo. O mesmo resultado seria obtido utilizando a função toLowerCase, que converte tudo para minúsculo. Listagem 3: Modificação no filtro para torná-lo case insensitive 1if($(this).text().toUpperCase().indexOf(texto.toUpperCase()) < 0) 2 $(this).css("display", "none"); Agora, digitando novamente as letras “ar”, apenas o item “Feijão” é ocultado por realmente não conter esse texto, como se vê na Figura 3.
  • 5. Figura 3: Filtro case insensitive Conclusão Vimos que implementar um filtro sobre uma lista é consideravelmente simples quando utilizamos os recursos da biblioteca jQuery. O desempenho do filtro também é satisfatório, pois ele é realizado do lado cliente, utilizando os recursos do browser, sem requisições ao servidor. Obviamente o código apresentado aqui é útil quando se tem uma lista previamente montada e exibida na página, pois caso fosse necessário realizar consulta a um banco de dados, Javascript não seria o bastante. Caso surjam dúvidas a respeito do conteúdo aqui apresentado, a seção de comentários, abaixo, está aberta. Até o próximo artigo.