Autocomplete no CakePHP com jQuery

Vamos ver uma forma bem simples de fazer aqueles famosos campos autocomplete no ótimo framework CakePHP usando jQuery.

Primeiro passo vamos fazer o download do jQuery e do jQuery UI, este último, responsável pela funcionalidade do autocomplete.

http://jquery.com/
http://jqueryui.com/

Feito o download, iremos jogar o jQuery e extrair o jQuery UI na pasta webroot do seu projeto em CakePHP.

No meu exemplo, irei utilizar um simples controller de Usuários. Vamos adicionar o helper Javascript para podermos carregar os scripts javascript.

No controller Usuários:

$helpers = array('Javascript');

function exemploAutocomplete() {}

function buscaUsuarios() {
Configure::write('debug', 0);
$this->layout = 'ajax';
$usuarios = $this->Usuario->find('all', array('conditions' => array('Usuario.status'=>'S','Usuario.nome LIKE ' => '%'.$this->params['url']['term'] . '%'), 'fields' => array('nome')));
$usuariosArray = Set::extract($usuarios, '{n}.Usuario');

echo $this->params['url']['callback'].'('.json_encode($usuariosArray).')';
}


Na view exemplo_autocomplete.ctp

<?php
$this->Form->input('nome', array('type' => 'text', 'id' => 'exemploAutocomplete'));
?>

<script>
$j = jQuery.noConflict();
$j(document).ready( function() {
$j("#exemploAutocomplete").autocomplete({
// callback que irá buscar os dados baseado no valor do campo
source: function(req, add){
// faz a requisição e espera um json como resposta
$j.getJSON("/Usuarios/buscaUsuarios?callback=?", req, function(data) {
// array que guardará o resultado do getJSON
var busca = [];
// trata o retorno do getJSON
$j.each(data, function(i, val){
busca.push(val.nome);
});
add(busca);
});
}
});
});
</script>

<?php
Javascript->link(array('jquery-ui/js/jquery-ui-1.8.5.custom.min'));
echo $this->Html->css('../js/jquery-ui/css/ui-lightness/jquery-ui-1.8.5.custom');
?>


E pronto… um autocomplete bonito e funcional.