Guia Bootstrap

Quicksearch e Bootstrap: adicione buscas em páginas web

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (12)  (1)

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

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ficou com alguma dúvida?