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

perro

Ingeniero en Informática. Programador en PHP y Angular. Lo que mas adoro en el mundo es el conocimiento. Y el anime....y Japón...y el running...y bloguear claro y algunas otras cientos de cosas. Sigo buscando la manera de hacer mi primer millón.

13
Comenta!

avatar
CaChi

Muy bien, asi es que se hace comunidad… Muchos deben seguir tu actitud…

trackback

[…] random_number = Math.random(); if (random_number < .5){ } else { } En un post anterior vimos como usar tags jquery con autocomplete en KumbiaPHP pero….que pasa si solo queremos un solo valor en el campo de texto y no muchos? Bueno, […]

nucklear

No conocia de ese plugin, esta bueno. :-o :up:

CaChi

Perro, te deberia funcionar con esto:

$(document).ready(function () {
//la url que le pasamos debe ser relativa
$(«#input_cat»).tokenInput(«», {
alert(this.val());
});
});

Al3jandro
Al3jandro

Perro muy buen tutorial, yo solo cambie estos valores, para que mi partial pueda ser reutilizable:

$(«#input_cat»).tokenInput(«»,
por
$(«#»).tokenInput(«», {
..
Gracias por el tuto

luna

porque tengo problemas con la comillas en kumbia alguien me ayude $(document).ready(function () { //la url que le pasamos debe ser relativa /*de este lugar */ $(«#input_cat»).tokenInput(«<?echo "../categorias/listarCat»?>», /*hasta este lugare*/{ 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» } }); });

Leon
Leon

Hola perro, muy bueno tu post traducido y explicado aunque la verdad no se como funciona kumbia somo full codeigniter en fin, queria hacerte una consulta si probaste devolviendo los datos del autocomplete que hiciste al agregar a una base de datos por ejemplo para luego poder agregar más o eliminar según sea el caso, bueno espero tu respuesta o bueno a la comunidad gracias un abrazo

Leon
Leon

Hola de nuevo, bueno lo que quería era que al ingresar los tags mediante el autocomplete y agregarlos a una base de datos, al hacer un edita o modificar de estos datos por ejemplo, como los volvía a mostrar en un formulario de edición, como mencione para luego poder agregar más o eliminar tags según sea el caso.

En principio se agrega normal los tags, pero para editar ?

Gracias por la respuesta !!

Ricardo
Ricardo

dsd

Ricardo
Ricardo

en la libreria jquery.tokeninput busca esta linea function do_search() { var query = input_box.val().toLowerCase(); // yo en mi pagina puse un campo oculto con este nombre buscausua document.getElementById(‘buscausua’).value=query; // esta linea aumente aqui ahora buca estra otra linea: function computeURL() { var buscausua=document.getElementById(‘buscausua’).value; //alert(buscausua) var url = settings.url; url=url+’?tipo_busqueda=2&nombreusua=’+buscausua; //alert(url) //alert(url+’?tipo_busqueda=2′) if(typeof settings.url == ‘function’) { url = settings.url.call(); } return url; } }; // y listo asi tomo el valor del input y mando a buscar =) // ryk_sa@hotmail.com