Que son los jquery tags? bueno cualquiera que tenga una blog conoce lo que son las etiquetas verdad? Bueno es eso, es tener varios valores en un campo de texto y mandarlos todos a la vez. Queda algo asi junto con el autocomplete:
Para lograrlo vamos a hacer uso de un este plugin. Existen muchos pero me gusta el estilo facebook de este. Ademas los valores los vamos a traer desde una tabla en la base de datos porque es lo mas normal. Mi tabla va a ser esta:
Primero vamos a bajar el plugin y el estilo css jquery.tokeninput.js (click derecho->guardar enlace como…)
El plugin lo vamos a guardar en la carpeta app/public/javascript y al css en app/public/css
Necesitaran tambien obviamente jquery, si no lo tienen lo bajan de algun lado, y ahora debemos incluir todo eso en nuestro template. Yo lo hice en views/templates/default.phtml pero si ustedes usan otros entonces deberan agregar las siguientes lineas en los templates que corresponda. Deberia quedarles algo asi:
<?php echo stylesheet_link_tag('token-input-facebook') ?> <?php echo stylesheet_link_tags(); ?> <?php echo javascript_include_tag('jquery-1.3.2'); ?> <?php echo javascript_include_tag('jquery.tokeninput'); ?>
Vamos a usar un controlador llamado categorias_controller.php con 2 acciones(index y listarCat) con sus correspondientes vistas y un partial para tags.phtml para el codigo javascript del plugin.
En la vista index.phtml es donde tendremos el campo input text que usaremos para los tags y que tendra el efecto autocomplete:
<?View::partial('tags')?> <?= input_field_tag('input_cat')?>
El nombre del input es importante porque lo usaremos en el partial, el codigo del partial es este:
<script type="text/javascript"> $(document).ready(function () { //la url que le pasamos debe ser relativa $("#input_cat").tokenInput("<?echo "../categorias/listarCat"?>", { classes: { tokenList: "token-input-list-facebook", token: "token-input-token-facebook", tokenDelete: "token-input-delete-token-facebook", selectedToken: "token-input-selected-token-facebook", highlightedToken: "token-input-highlighted-token-facebook", dropdown: "token-input-dropdown-facebook", dropdownItem: "token-input-dropdown-item-facebook", dropdownItem2: "token-input-dropdown-item2-facebook", selectedDropdownItem: "token-input-selected-dropdown-item-facebook", inputToken: "token-input-input-token-facebook" } }); }); </script>
Parece largo pero la unica linea importante es la que esta despues del comentario, o sea la de la URL que procesara los resultados, el resto es solo el estilo y algunas cosas mas sin mucha importancia. Como ven estoy llamando a otra vista (listarCat).
La accion listarCat sera la encargada de procesar lo que escribimos y generar una vista con los valores requeridos usando el formato JSON. La accion es esta:
public function listarCat(){ //esto para que no devuelva el template, solo la vista $this->set_response('view'); //q tiene lo que acabamos de escribir en el campo de texto $input = $_GET["q"]; //hacemos la consulta $categorias=$this->Categorias->find("nombre like '%$input%'"); //hacemos un array que vamos a transformar a formato JSON en la vista $this->data = array(); foreach ($categorias as $cat) { $json = array(); $json['value'] = $cat->id; $json['name'] = $cat->nombre; $this->data[] = $json; } }
Esta claro con los comentarios verdad? Ahora la vista listarCat.phtml tiene solo lo siguiente:
<?php echo json_encode($data);?>
Eso es todo, ahora si cargan http://localhost/mi_programa/categorias/index/ deberian ver funcionando el efecto de tags y autocomplete.
Esta lindo el efecto y es de lo mas buscados por eso me decidi a postearlo pero nunca lo uso y eso es porque no se como procesar el valor del input!!!!! en la pagina del plugin no dice como, o no veo donde…asi que el que lea esto y sepa eso por favor digame