Cake Na Veia_ Autocomplete Nativo Do Cake (Ajax Helper)
-
Upload
stnpitltej -
Category
Documents
-
view
10 -
download
4
description
Transcript of Cake Na Veia_ Autocomplete Nativo Do Cake (Ajax Helper)
-
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