jQueryUI Autocomplete no CakePHP - Agora sim!

Postado por Carlitos | Tags , , , , | 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,

Comentários postados (3)

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

Postar um comentário