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