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, tambien hay muchos plugins jquery para eso y yo voy a explicar uno de los mas sencillos que pueden verlo en esta pagina. Queda asi en uso:
Otra vez los valores los vamos a sacar de una tabla en una base de datos, en este caso vamos a usar la misma tabla que en mi post anterior.
De nuevo vamos a tener la misma estructura en la aplicacion: un controlador (categorias_controller.php) con 2 acciones (index y listarCat) con sus correspondientes vistas y un partial (autocomplete.phtml) para que sea mas limpio el codigo de la vista y ademas podamos reusarlo.
Primero habra que bajar todo lo que necesitamos, aqui les prepare un paquete con todo lo que necesitan. Lo descomprimen y tienen 2 plugins jquery (dimensiones y autocomplete) que deben colocar en la carpeta app/public/javascript, tiene el jquery que deben colocar en la misma carpeta y un css que deben colocar en la carpeta app/public/css.
Luego como siempre todo eso debe ser incluido en el template que esten usando, algo asi les deberia quedar:
<?php echo stylesheet_link_tag('jquery.autocomplete') ?>
<?php echo stylesheet_link_tags(); ?>
<?php echo javascript_include_tag('jquery-1.3.2'); ?>
<?php echo javascript_include_tag('dimensions'); ?>
<?php echo javascript_include_tag('jquery.autocomplete'); ?>
Primero veamos la vista index.phtml que es donde tenemos el input text. Tiene solo este codigo:
<?View::partial('autocomplete')?>
<?= input_field_tag('input_cat')?>
Otra vez es importante el nombre del input porque lo usaremos en el partial. El codigo del partial es el siguiente:
<script type="text/javascript">
$(document).ready(function(){
$("#input_cat").autocomplete("<?echo PUBLIC_PATH."categorias/listarCat"?>");
});
</script>
Como veran recibe como parametro la URL de la vista que tiene los valores a mostrar.
Antes de ver esa vista tenemos que ver la accion correspondiente pues es donde realizamos la consulta para filtrar los resultados.
public function listarCat(){
//para que solo se muestre la vista sin el template
$this->set_response('view');
//la variable q tiene lo que escribimos en el input text
$input = $_GET["q"];
//realizamos la consulta y el resultado lo pasamos a la vista
$this->cats=$this->Categorias->find("nombre like '%$input%'");
La vista toma esa variable y genera una lista que la verdad no entiendo porque es asi, hubiera sido mejor usar el formato JSON pero bueno, asi funciona
<?foreach ($cats as $value) {
echo "$value->nombre|$value->id \n";
}?>
Una vez mas eso es todo, ahora prueben y deberia funcionar. Es un plugin muy sencillo de usar, antes me complicaba un monton pero era solo por falta de conocimientos y cada dia aprendo un poco mas Y si alguien sabe el porque de ese formato para la vista listarCat por favor digamelo en los comentarios.
Actualizacion: Tal como dice CaChi en los comentarios, al valor ‘q’ que recibimos lo debemos pasar por un filter_var.
