Você está na página 1de 2

Cake na veia: Autocomplete nativo do Cake (Ajax Helper)

1 de 2

http://cakenaveia.blogspot.com.br/2011/02/autocomplete-nativo-do-ca...

Pgina inicial

Autocomplete nativo do Cake (Ajax


Helper)

Postado por Carlitos | Tags Ajax , Autocomplete , Cakebook , Cakephp , Helper Ajax |
Postado em 05/02/2011 s 11:20

Buscar...

Seguidores

Eu j havia mostrado uma implementao de autocomplete no Cake usando o jQuery UI


(http://cakenaveia.blogspot.com/2010/06/jqueryui-autocomplete-no-cakephp-agora.html), mas

Google Friend Connect

nunca havia usado o autocomplete nativo dele que utiliza o Prototype e o Scriptaculos. At porque no

Membros (8)

tenho muita familiaridade com essas outras bibliotecas e gosto muito dos temas prontos do jQuery UI, o
que dispensa dores de cabea com o CSS.
Bom vamos nessa ento...
J um membro? Fazer login

Antes de comearmos veja nos posts anteriores como criar uma tabela de "cidades" (no meu caso, com
os campos: id, estado_id, cidade) e crie para ela o model, views e controller usando o bake.

Quem Sou?

1) Seguindo o book (http://book.cakephp.org/view/1370/autoComplete) crie a action


autoComplete() no controller ...app/controllers/cidades_controller.php.

Carlitos
Visualizar meu perfil completo

function autoComplete(){
$this->layout = 'ajax';
$cidades = $this->Cidade->find('all', array(

Arquivos

'conditions' =>

array('Cidade.cidade LIKE' => $this->data['Cidade']['cidade'] . '%'),


2011 (6)
'order' => array('Cidade.cidade'),
'fields' => array('cidade')

Maro (2)

)
);
$this->set('cidades', $cidades);
}
Veja que estou listando todas as cidades cujo nome comece com o argumento recebido via POST e
ordeno a lista de cidades ascendentemente.
2) Crio a view ...app/views/cidades/auto_complete.ctp:
<ul>

Fevereiro (3)
Autocomplete nativo do Cake (Ajax
Helper)
Helper Ajax com jQuery, ahan!
Select combo (estado + cidade)
usando o Helper Aja...
Janeiro (1)

<?php
foreach($cidades as $cidade)
echo '<li>' . $cidade['Cidade']['cidade'] . '</li>';

2010 (9)

?>
</ul>
3) E na view ...app/views/cidades/add.ctp adicionamos o autocomplete em si:
<?php

Sites Que Recomendo

Tulio Faria false);


$javascript->link('https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js',
Dica: pluralizao no
model do
$javascript->link('https://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js',
false);
CakePHP sem criar novas regras
H 4 meses

echo $this->Html->css('autocomplete');
?>
<div class="cidades form">

CakePHP Brasil
Fim do MeioUpload

<?php echo $this->Form->create('Cidade');?>

H 2 anos

<fieldset>
<legend><?php __('Add Cidade'); ?></legend>
<?php
echo $this->Form->label('Cidade');

KISS (Souagil)
Inserindo ndices automaticamente
nos relacionamentos
H 3 anos

echo $ajax->autoComplete('Cidade.cidade', '/cidades/autoComplete');


?>
</fieldset>

CakePHP: the rapid development


php framework. Pages

<?php echo $this->Form->end(__('Submit', true));?>


</div>
Veja que o $ajax->autoComplete('Cidade.cidade', '/cidades/autoComplete') cria um input com
autocomplete, mas esse input vem sem label =/, portanto temos que gerar um label antes.
Veja tambm que adicionei um CSS (echo $this->Html->css('autocomplete')) para estilizar a
lista com os resultados do autocomplete. O arquivo ...app/webroot/css/autocomplete.css ficou assim:
div.auto_complete {
background: #003d4c;

The Bakery
Cookbook

Tags
cakebook (4)
javascript (3) php (3)

cakephp (12)

color: #ffffff;
}
div.auto_complete ul {
margin:0;
padding:0;
width: 100%;
list-style-type:none;
}
div.auto_complete ul li.selected {
background-color: #62AF56;
font-weight: bold;
}
div.auto_complete ul li {
margin:0;
padding:5px;
cursor:pointer;
}
Obs.: Eu dei uma garibada no CSS que achei aqui (http://webdomino.blogspot.com/2006/08/ajaxautocompletion.html). =]
Ao acessar a aplicao em: http://<seu_dominio>/cidades/add e entrar com o prefixo de alguma cidade j
cadastrada no banco no campo cidade, aps alguns segundos ( bem rpido, acho que no chega nem a
isso) a lista carregada automagicamente* hehe!

31/03/2015 11:35

Cake na veia: Autocomplete nativo do Cake (Ajax Helper)

2 de 2

Veja o resultado final!

http://cakenaveia.blogspot.com.br/2011/02/autocomplete-nativo-do-ca...

2010 Todos direitos liberados. Cake na veia

Espero que tenham gostado! Qualquer dvida s perguntar.


Abrao!

Comentrios postados (2)

Leonardo A. Seefeld Says...

On 21 De Maio De 2011 18:35

Muito bom seu post... Sou iniciante em Cake e consegui implanta-lo \o/
S queria uma ajuda, no meu caso tenho estados e cidades e ao cadastrar uma nova cidade queria
puxar nessa lista os estados para fazer a vinculao...
Dvidas:
* a funcao autoComplete e os view devem ser criados no controller do estado e na pasta de views do
estado?
* Como ao selecionar um estado v para o banco de dados no o nome dele e sim o id?

Leonardo A. Seefeld Says...

On 21 De Maio De 2011 18:38

Muito bom... gostei muito do post.


S tenho umas duvidas de iniciante:
* Como listar ao adicionar uma cidade as listas dos estados? A funcao autoComplete para puxar os
estados devera ficar no controller dos estados neh? e como devo chama-lo na view das cidades?
* Como ao selecionar um estado o que ser passado para o banco o id e no o seu nome?

Postar um comentrio

Comentar como:

Publicar

Postagem mais recente

Postagem mais antiga

Assinar: Postar comentrios (Atom)

31/03/2015 11:35