Utilizando autocomplete remoto – jQuery UI

jQuery UI Logo

Nenhum produto encontrado nessa seleção.

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.

/por