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