Quicksearch e Bootstrap: adicione buscas em páginas web

Veja neste artigo como utilizar um plugin de consulta Quick search em conjunto com o framework Bootstrap para implementar buscas em tabelas e listas HTML.

Motivação

Ao exibir para o usuário um conjunto de informações na forma de tabelas ou listas, normalmente será necessário permitir que sejam realizadas consultas sobre esses registros, a fim de localizar um ou vários itens desejados. Em aplicações web, esse tipo de funcionalidade normalmente é implementada com JavaScript nas páginas HTML, habilitando o usuário final a digitar o texto pelo qual deseja filtrar os registros e já obter o resultado de forma instantânea, sem que seja necessário submeter um formulário de busca para o servidor.

Nesse artigo como utilizar o Quicksearch, um plugin desenvolvido sobre a biblioteca jQuery e que facilita a implementação de funcionalidades de consultas em listas, tabelas entre outros elementos HTML. Além disso, vamos utilizar o framework Bootstrap para personalizar a aparência dos elementos da página.

Saiba mais sobre a biblioteca jQuery.

Configurando o projeto

Para poder utilizar os recursos de CSS e JavaScript do Bootstrap, da jQuery e do Quickserach, é necessário importar os arquivos .css e .js referentes a cada um. Isso pode ser feito baixando os arquivos em seus sites oficiais e salvando-os no diretório do seu projeto, ou referenciando as URLs das CDNs (Content Delivery Network) de cada componente. Nesse artigo optaremos por referenciar diretamente as CDNs, conforme é demonstrado na Listagem 1.

01<!doctype html> 02<html> 03<head> 04 <meta name="viewport" content="width=device-width, initial-scale=1"> 05 <title>Quicksearch e bootstrap</title> 06 <script src="https://code.jquery.com/jquery-3.1.1.js"></script> 07 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 08 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.quicksearch/2.3.1/jquery.quicksearch.js"></script> 09 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 10 </head> 11<body> 12 13 14</body> 15</html>
Listagem 1. Página HTML referenciando a jQuery, o Bootstrap e o Quicksearch

Linha 6: Importação da biblioteca jQuery antes do Bootstrap e do Quicksearch, uma vez que eles dependem dessa biblioteca para funcionar corretamente;

Linha 7: Importação do arquivo JavaScript do Bootstrap;

Linha 8: Importação do arquivo JavaScript do plugin Quicksearch;

Linha 9: Importação do arquivo CSS do Bootstrap.

Configurando os elementos para consulta

Para realizar a consulta deve-se inserir um input do tipo text, no qual o usuário poderá digitar o que está desejando consultar na tabela, lista, etc. Aqui, além do input criaremos também uma div e utilizaremos as classes do Bootstrap para personalizar a aparência dos controles, como mostra a Listagem 2.

01 <div class="form-group input-group"> 02 <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span> 03 <input name="consulta" id="txt_consulta" placeholder="Consultar" type="text" class="form-control"> 04 </div>
Listagem 2. Campo a partir do qual será feita a busca

Em seguida, precisamos adicionar os dados que serão filtrados. Aqui criaremos uma tabela com algumas linhas contendo e-mail, ID, telefone e URL e nela também serão empregadas algumas classes do Bootstrap para alterar seu layout. Na Listagem 3 temos o código dessa tabela.

01 <table id="tabela" class="table table-hover"> 02 <thead> 03 <tr> 04 <th>Email</th> 05 <th>Id</th> 06 <th>Telefone</th> 07 <th>Url</th> 08 </tr> 09 </thead> 10 <tbody> 11 <tr> 12 <th>devo@flexomat.com</th> 13 <td>66672</td> 14 <td>941-964-8535</td> 15 <td>http://gmail.com</td> 16 </tr> 17 18 <tr> 19 <th>henry@mountdev.net</th> 20 <td>35889</td> 21 <td>941-964-9543</td> 22 <td>http://dotnet.ca</td> 23 </tr> 24 </tbody> 25 </table>
Listagem 3. Tabela que será filtrada

Após adicionar o input e a tabela com alguns dados, podemos abrir a página no browser para verificar o resultado até aqui, que deve ser semelhante ao que é apresentado na Figura 1.


Figura 1. Tabela e input para busca

Implementando a busca

Para ativar de fato a funcionalidade de busca, basta fazer uma chamada à função quicksearch a partir do input criado anteriormente e passando como parâmetro os elementos que serão filtrados. No exemplo que estamos desenvolvendo, primeiramente precisamos selecionar o input usando a jQuery e a partir daí chamar a função quicksearch, passando como parâmetro a tabela que será filtrada, como vemos no seguinte código:

01 <script> 02 $("input#txt_consulta").quicksearch("table#tabela tbody tr"); 03 </script>
Listagem 4. Script para carregar o plugin Quicksearch
Run

Linhas 1 a 3: Esse script, necessário para o carregamento do plugin, deve ser inserido no final do documento imediatamente acima do fechamento da tag body

Linha 2: Código jQuery para o carregamento do plugin. Passamos como parâmetro o elemento tr do elemento table cujo o id é #tabela usando o seletor table#tabela tbody tr

Aqui, além de informar que a busca será feita sobre a tabela, precisamos explicitar adicionalmente que isso ocorrerá nos dados que estão contidos nas linhas (tr) dentro do corpo da tabela (tbody).

Feito isso, ao digitar um texto no input txt_consultaa consulta será feita em todas as colunas e linhas da tabela, ou seja. Assim, as linhas que não atenderem ao filtro serão ocultadas, mantendo visíveis apenas aquelas que contém o termo pesquisado.

A função quicksearch oferece ainda outras configurações para realizar consultas mais elaboradas. Para conhece-las, basta acessar o site oficial do plugin.

Artigos relacionados