jQueryUI Autocomplete no CakePHP - Agora sim!
Postado por Carlitos | Tags autocomplete , cakephp , jquery , jqueryui , json | Postado em 15:55
3
Dias atrás postei como usar o Autocomplete do jQueryUI no cakePHP, porém tive que fazer uma "gambiarra" pra que a opção de obter os valores via data source "funcionasse".
Bom, então depois de um help do pessoal do jquery-br vi que o arquivo que gera os resultados recebe um valor via GET através da variável "term". Com isso basta verificar quais das chaves possui o "term" (ou até aqueles que começam com "term", basta algumas alterações no código).
Agora veja a solução pronta!
1º O Controller Users (./app/controllers/users_controller.php):
<?php /** * @author Carlitos Fioravante */ class UsersController extends AppController { var $name = 'Users'; var $helpers = array('Javascript'); function autocomplete(){ $this->set('users', $this->User->find('list', array('fields' => 'User.username'))); } function list_users(){ $this->layout = false; $this->set('users', $this->User->find('list', array('fields' => 'User.username'))); } } ?>
2º A view "autocomplete.ctp" (./app/views/users/autocomplete.ctp):
<?php /** * @author Carlitos Fioravante */ $javascript->link(array('http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js','http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js'), false); echo $html->css('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/flick/jquery-ui.css', null, array('inline' => false)); $javascript->codeBlock(' jQuery(function($){ $("#username").autocomplete({ source: "' . $html->url(array('action' => 'list_users')) . '" }); }); ', array('inline' => false)); echo $form->create('Users'); echo $form->input('username', array('id' => 'username')); echo $form->end('OK'); ?>
3º A view "list_users.ctp" (./app/views/users/list_users.ctp):
<?php /** * @author Carlitos Fioravante */ header('Content-type: application/json; charset=UTF-8'); $users_selecteds = array(); if(!empty($_GET['term'])){ foreach($users as $user){ if(strripos($user, $_GET['term']) !== false){ array_push($users_selecteds, $user); } } } echo json_encode($users_selecteds); ?>
Táh aê! Espero que seja proveitoso para alguém!
Abraço,
Bom o teu post. Consegui fazer igual ao que vc postou. Meu problema agora é quando tenho que buscar dado de outra tabela. Tenho a tabela centros (id, title, cidade_id) e a tabela cidades (id, title). Ja tentei de cima pra baixo montar esse esquema ai para que no formulario que adiciona um novo centro, ao inves de selecionar uma das 9800 e tantas cidades, simplismente use o autocomplete para facilitar. Tem como exemplificar? Muito grato pela explicacao!
* Utilizando o famoso select ta funcionando normalmente (atraves do controller)
$ufs = $this->Centro->Uf->find('list');
$cidades = $this->Centro->Cidade->find('list');
$this->set(compact('ufs', 'cidades'));
Cosmo, dá uma olhada nesse post (http://cakenaveia.blogspot.com/2011/02/autocomplete-nativo-do-cake-ajax-helper.html) onde eu mostro um exemplo do autocomplete carregando cidades do banco. Veja se atende a sua necessidade? Abraço!
Cara, tentei montar esse modelo em um outro controller não funcionou