Autocomplete nativo do Cake (AjaxHelper)Postado por Carlitos | Tags Ajax , Autocomplete , Cakebook , Cakephp , Helper Ajax |

Postado em 05/02/2011 s 11:20

2

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

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

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

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.

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

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

function autoComplete(){

$this->layout = 'ajax';

$cidades = $this->Cidade->find('all', array(

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

'order' => array('Cidade.cidade'),

'fields' => array('cidade')

)

);

$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:

3) E na view ...app/views/cidades/add.ctp adicionamos o autocomplete em si:

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;

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/ajax-

autocompletion.html). =]

Ao acessar a aplicao em: http:///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!

Buscar...

Tulio FariaDica: pluralizao no model do

CakePHP sem criar novas regras

H 4 meses

CakePHP BrasilFim do MeioUpload

H 2 anos

KISS (Souagil)Inserindo ndices automaticamente

nos relacionamentos

H 3 anos

CakePHP: the rapid developmentphp framework. Pages

The Bakery

Cookbook

Seguidores

Google Friend Connect

Membros (8)

J um membro? Fazer login

Quem Sou?

Carlitos

Visualizar meu perfil completo

Arquivos

2011 (6)

Maro (2)

Fevereiro (3)

Autocomplete nativo do Cake (AjaxHelper)

Helper Ajax com jQuery, ahan!

Select combo (estado + cidade)usando o Helper Aja...

Janeiro (1)

2010 (9)

Sites Que Recomendo

Tags

cakebook (4) cakephp (12) javascript (3) php (3)

Pgina inicial

Cake na veia: Autocomplete nativo do Cake (Ajax Helper) http://cakenaveia.blogspot.com.br/2011/02/autocomplete-nativo-do-ca...

1 de 2 31/03/2015 11:35

Postagem mais recente Postagem mais antiga

Veja o resultado final!

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

Assinar: Postar comentrios (Atom)

2010 Todos direitos liberados. Cake na veia

Cake na veia: Autocomplete nativo do Cake (Ajax Helper) http://cakenaveia.blogspot.com.br/2011/02/autocomplete-nativo-do-ca...

2 de 2 31/03/2015 11:35