No post anterior mostrei como usar "mascaras" em campos de formulario do Cake com plugin meioMask pra jQuery. Hoje vou mostrar um outro plugin que faz basicamente a mesma coisa, porem ele mostra a "mascara", digamos assim, assim que damos um focus no campo. Por isso gosto e uso muito ele. Trata-se do maskedinput (http://digitalbush.com/projects/masked-input-plugin/).Bom, antes de comecar da um play nesse som =]1) Primeiramente fazemos o download do plugin maskedinput atraves do link http://digitalbush.com/projects/masked-input-plugin/. Eu baixei a versao 1.2.2 minified. Salvando o script em app/webroot/js;2) Em uma view qualquer (escolhi a app/views/users/add.ctp) gerada via BAKE eu criei tres campos: dtNasc, cpf e hora. Vejam:<?php//... app/views/users/add.ctp... echo $this->Form->input('dtnasc', array( 'label' => 'Data de Nascimento' ) ); echo $this->Form->input('cpf', array( 'label' => 'CPF' ) ); echo $this->Form->input('hora', array( 'label' => 'Hora' ) );...?>3) Adiciono os scripts (jQuery e o plugin) na view. Vejam:<?php//... app/views/users/add $javascript->link( array( 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js', 'jquery.maskedinput' ), false);...?>4) Conforme falei no post anterior usaremos os IDs dos campos para que o jQuery "os encontre" no DOM. Entao setamos as mascaras para cada campo, para isto usamos a funcao mask(). Vejam:<?php//... app/views/users/add.ctp... $javascript->codeBlock(' jQuery(function($){ $("#UserDtnasc").mask("99/99/9999"); $("#UserCpf").mask("999.999.999-99"); $("#UserHora").mask("99:99"); }); ', array('inline' => false));...?>5) Pronto! Simples nao? Repare que ao colocar o cursor do mouse sobre os campos a "mascara" ja e mostrada. Isso facilita muito para o usuario, uma vez que ele ja preve como os valores serao formatados (mascarados). Vejam o codigo final da view:<?php//... app/views/users/add.ctp $javascript->link( array( 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js', 'jquery.maskedinput' ), false); $javascript->codeBlock(' jQuery(function($){ $("#UserDtnasc").mask("99/99/9999"); $("#UserCpf").mask("999.999.999-99"); $("#UserHora").mask("99:99"); }); ', array('inline' => false));?><div class="users form"><?php echo $this->Form->create('User');?> <fieldset> <legend><?php __('Add User'); ?></legend> <?php echo $this->Form->input('dtnasc', array( 'label' => 'Data de Nascimento' ) ); echo $this->Form->input('cpf', array( 'label' => 'CPF' ) ); echo $this->Form->input('hora', array( 'label' => 'Hora' ) ); ?> </fieldset><?php echo $this->Form->end(__('Submit', true));?></div>Bom, espero que tenham gostado! Apesar de ser "perfumaria", muitas vezes os recursos de mascara facilitam a vida do usuario. So nao pode esquecer de tratar os dados no server-side, pois o usuario pode estar com o javascript desabilitado, ok? =P Dias atras postei como usar o Autocomplete do jQueryUI no cakePHP, porem tive que fazer uma "gambiarra" pra que a opcao de obter os valores via data source "funcionasse".Bom, entao depois de um help do pessoal do jquery-br vi que o arquivo que gera os resultados recebe um valor via GET atraves da variavel "term". Com isso basta verificar quais das chaves possui o "term" (ou ate aqueles que comecam com "term", basta algumas alteracoes no codigo).Agora veja a solucao pronta!1o 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'))); }}?>2o 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');?>3o 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);?>Tah ae! Espero que