Artigos HTML e CSS Quicksearch e Bootstrap: adicione buscas em páginas web

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 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.

Tabela e input para busca
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.