Jquery tags con autocomplete en KumbiaPHP

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