DevMedia - Filtrando listas HTML com jQuery

748 views
619 views

Published on

Veja neste artigo como implementar um filtro sobre uma lista ul (também aplicável a ol) do lado cliente, utilizando jQuery.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
748
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

DevMedia - Filtrando listas HTML com jQuery

  1. 1. IntroduçãoSabemos que a principal forma de listagem de dados detalhados em páginas web é usando tabelas, e é este areal função desse tipo de elemento. Porém, devemos estar prontos para lidar com diversos tipos de situaçõesque surgem em nosso dia-a-dia e saber aproveitar todos os recursos das ferramentas de que dispomos paraatingir 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 novastendências do desenvolvimento web.Muitas vezes são apresentadas, para o usuário, grandes quantidades de dados que este precisa filtrar paralocalizar somente a informação desejada. Em algumas situações, para evitar o envio de várias requisiçõesseguidas para o servidor, com o intuito de realizar uma pesquisa no banco de dados e retornar apenas osregistros pesquisados, pode ser interessante realizar esse filtro diretamente no lado do cliente. Isso implica emutilizar tecnologias front-end, ou seja, HTML, CSS e Javascript para filtrar as informações diretamente napá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 umalista <UL> (também aplicável a <OL>) utilizando Javascript, mais especificamente usando a biblioteca jQuery.O código HTMLComo o objetivo aqui é enfatizar no filtro realizado sobre uma lista, não serão abordados detalhes de design ouacesso a bases de dados. Apenas será utilizada uma estrutura HTML básica, sobre a qual será aplicada umasimples folha de estilo apenas para dar à página um visual mais “agradável”.Listagem 1: Código HTML da página1 <!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:20px8 }9 input[type="text"]{ width:100%;10 border:solid 1px11 }1213 ul{14 padding:0;;15 margin:0 }1617 ul li{18 list-style:none;19 border:dashed 1px;20 padding:5px21 } </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. 2. 28 <li>Farinha</li>29 <li>Açúcar</li> <li>Macarrão</li>30 </ul>31</body>32</html>33343536373839Salvando o conteúdo da Listagem 1 em arquivo de extensão .html, obtemos o resultado apresentado na figuraa seguir.Figura 1: Página aberta no browserO 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 norestante do código.O código da Listagem 2, a seguir, é o responsável por implementar o filtro sobre a lista “ulItens”. Ele deve serinserido abaixo da tag que faz referência à biblioteca jQuery.
  3. 3. Listagem 2: Código Javascript para implementar o filtro12 <script type="text/javascript">3 $(function(){ $("#txtBusca").keyup(function(){4 var texto = $(this).val();56 $("#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>13Abaixo têm-se uma explicação detalhada de cada linha do código acima, visando facilitar o entendimento doleitor.Linhas 1 e 13: abertura e fechamento da tag <script> que contém o código Javascript a ser interpretado nomomento do carregamento da página. Diferente da referência à jQuery, nesse caso não foi necessário definir oatributo “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 elementosnã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 valora ser usado como filtro. Esse evento foi utilizado para que o filtro seja feito sempre que uma tecla forpressionada e solta. Dessa forma, mesmo após ter sido digitada apenas um caracter, ao soltar a tecla o filtroserá realizado.Linha 4: nessa linha se obtém o valor digitado no input e o atribui a uma variável chamada “texto”, para serusada posteriormente. Nesse nível, o operador “this” refere-se ao próprio input que está disparando o evento. Afunção val() é a responsável por recuperar o valor digitado na caixa de texto e está contida na bibliotecajQuery.Linha 6: a propriedade CSS display de todos os itens (<li>) da lista seja alterada para “block”. Com isso, todosos itens tornam-se visíveis.Linhas 7 e 10: abertura e fechamento da função que tratará cada item da lista, quando esta for percorridapara que se realize o filtro. A função each da jQuery dá acesso a todos os elementos de uma lista (lista deelementos, 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 textodigitado 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 aval(), pois esta é usada para valor inseridos em elementos de formulário como inputs e checkboxes. Afunção indexOf retorna -1 se o texto for localizado ou um valor maior indicando a posição do texto buscado noconteúdo do item, caso seja localizado. É de nosso interesse, nessa situação, verificar se o texto NÃO foilocalizado, 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. 4. Figura 2: Exemplo de filtroObserva-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 serinteressante. Isso pode ser facilmente contornado convertendo ambos os lados da comparação (o texto do iteme 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 Javascriptpara converter tudo para maiúsculo. O mesmo resultado seria obtido utilizando a função toLowerCase, queconverte tudo para minúsculo.Listagem 3: Modificação no filtro para torná-lo case insensitive1if($(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 essetexto, como se vê na Figura 3.
  5. 5. Figura 3: Filtro case insensitiveConclusãoVimos que implementar um filtro sobre uma lista é consideravelmente simples quando utilizamos os recursosda 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 napá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.

×