jQuery UI Logo

Inputs de autocomplete são sempre úteis na área de desenvolvimento, principalmente quando utilizamos Ajax para buscar dados em um servidor remoto sem atualizar a página.

Nesse tutorial, vou detalhar como utilizar a função autocomplete do jQuery UI para buscar dados na base de dados utilizando quantos parâmetros forem necessários.

Download necessário

Antes de iniciar, é necessário baixar o jQuery UI.

Faça isso no link abaixo:

Após descompactar a pasta do jQuery UI, também é necessário linkar o JavaScript e CSS do jQuery e jQuery UI no seu HTML. Isso pode ser feito da seguinte maneira:

<!doctype html>
<html>
<head>
	<title>Autocomplete - Tutsup</title>
	
	<meta charset="UTF-8">
	
	<!-- CSS do jQuery -->
	<link rel="stylesheet" href="pasta_jquery_ui/jquery-ui.css">
	
	<!-- JS do jQuery -->
	<script src="pasta_jquery_ui/external/jquery/jquery.js"></script>
	
	<!-- JS do jQuery UI -->
	<script src="pasta_jquery_ui/jquery-ui.js"></script>
</head>
<body>
	<!-- Conteúdo do Body -->
</body>
</html>

Os comentários HTML acima detalham onde os links foram inseridos.

A partir daqui, vamos trabalhar apenas dentro do <body>.

O HTML

Primeiramente, vamos criar um input padrão:

<input data-categoria="Suporte" data-fonte="Página inicial" name="cliente" class="cliente"> 

Estou criando apenas o input, mas você pode adicionar um formulário completo se preferir.

Nesse input existem alguns atributos personalizados, neles você pode adicionar o que quiser. Além disso, se precisar de mais parâmetros, basta incluir; caso contrário, basta removê-los.

Outro ponto interessante desse tutorial é que você pode utilizar quantos inputs desejar, 1, 100, 1000, você quem manda…

O jQuery UI (JavaScript)

Agora vamos adicionar o recurso de busca logo abaixo do input:

<script>
// URL para a busca
var busca_url = 'busca.php';

// Função de busca
var busca_funcao = function( request, response ) {
	$.ajax({
		url: busca_url,
		type: 'GET',
		dataType: "json",
		data: {
			// Parâmetro direto
			cliente: request.term,
			
			// Capturando parâmetro do input
			categoria: this.element.attr('data-categoria'),
			
			// Capturando outro parâmetro do input
			fonte: this.element.attr('data-fonte')
		},	
		success: function(data) {
			response(data);
		}	
	});
}

$( ".cliente" ).autocomplete({
	source: busca_funcao, 
	minLength: 1,
	select: function( event, ui ) {
		// Quando for selecionado, faça:
		alert( ui.item.nome_cliente );
	}
});
</script>

Se você adicionar ou remover algum atributo do input, lembre-se de adicionar/remover do código do jQuery UI.

Por exemplo, para o atributo "data-categoria", a linha a ser removida é:

categoria: this.element.attr('data-categoria'),

E assim por diante.

O PHP

Para o PHP, vou criar um trecho de código que gera as variáveis de acordo com os parâmetros enviados. Você poderá fazer o que precisar com elas:

<?php
// Verifica se tem algum parâmetro
if ( ! isset( $_GET ) || empty( $_GET ) || ! is_array( $_GET ) ) {
	exit();
}

// Extrai as variáveis de $_GET
extract( $_GET );

// Variáveis disponíveis
//echo $cliente;
//echo $categoria;
//echo $fonte;

// Abaixo vou apenas exibir valores de qualquer maneira para exemplificar
// Mas você pode fazer o que quiser com os parâmetros acima

// Valores fictícios
$clientes = array(
	array(
		'value' => 'Maria José',
		'sobrenome' => 'Silva',
		'nome_cliente' => 'Maria José Silva',
	),
	array(
		'value' => 'João José',
		'sobrenome' => 'Silveira',
		'nome_cliente' => 'João José Silveira',
	),
	array(
		'value' => 'Ana Maria',
		'sobrenome' => 'Miranda',
		'nome_cliente' => 'Ana Maria Miranda',
	),
);

// Deve-se retornar dados no formato jSON
echo json_encode( $clientes );

Você pode fazer o que preferir com elas, porém, ao final é necessário retornar os valores no formato jSON.

Download do script completo

Se quiser baixar o script completo criado neste tutorial, utilize o link abaixo:

Você deve extraí-lo em um servidor que tenha PHP.

Concluindo

Este é um recurso muito útil em vários casos, e o melhor da história, é que não é nada complicado fazer a configuração.

Deixe a gente saber o que você achou nos comentários abaixo.

Caso tenha dúvidas, basta perguntar.