Input con autocomplete jquery en KumbiaPHP

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.

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.

16
Comenta!

avatar
nucklear

De hecho ese plugin en los parametros de configuración puedes elegir como quieras que te reciba los datos para mostrarlo: En listas, un array, Json, o como lo haces vos.

CaChi

Como recomendación para que lo tomen en cuenta al dato que tomamos del $_GET se le ha de pasar un filter_var aka un post donde hablo sobre el tema esto porque muchos obvian el tema de filtrado de datos y algo que debemos siempre tener presente…

El Post Muy bueno…

wampicom
wampicom

Ese plugin es el autocomplete de bassistance?
Podrías indicar la página del plugin para ver la documentación oficial por favor.

Porqué hay que usarlo con el plugin dimensions?

Voy a probar usandolo como lo explicas en el tutorial, pero una vez intenté usar ese plugin ( sin el dimensions ) y no me gustó porque la lista desplegable que genera con las coincidencias no la ordena alfabéticamente y no supe como ordenarla xD.

De antemano muchas gracias por tan excelente blog.

wampicom
wampicom

Listo, ya pude hacer que saliera ordenada, es que antes yo estaba colocando los id al principio y por eso no salia ordenado alfabeticamente. En el controller en el find ordené ascendentemente por nombre y ahora si funciona. Aquí la imágen de como me muestra las coincidencias http://bit.ly/bwnGxV $j(‘#autocomplete1’).autocomplete(«»,{ //Caracteres mínimos que se deben digitar para que haga la petición ajax minChars: 3, //muestra máximo 100 coincidencias en la lista max: 100, width: 310, // Para que se pueda buscar en palabras intermedias matchContains: «word», formatItem: function(row, i, max) { return row[0] +» – id: » +row[1] ; }, formatMatch:… Leer mas »

j053d

Se aprecia mucho ver estas practicas e indicarlas aqui en tu espacio para el conocimiento publico. Pero aunque entiendo que el que exista solo aqui en tu blog impulsa el trafico de tu sitio, considero un poco egoista el que realices varias practicas apuntadas al framework y en ningun momento coloques una copia en el wiki, el cual es la documentacion centralizada y oficial del framework y el cual crece por la comunidad de quien desee anexar y enriquecerla mas. Si gustas, no tienes que indicar en tus articulos ningun link de referencia al wiki, pero la informacion esta mejor… Leer mas »

Damian

Hay alguna forma de que el usuario por ejemplo no tenga que poner acento a la palabra a buscar, o sea que me traiga ordenada alfabeticamente con o sin tilde, porque en mi caso si la palabra es con acento me estoy dando cuenta que no la trae. Por ejemplo: se escribe “ac” y me trae todo lo que empiece con esas dos letras pero si ya me escribe “acu” y solo tengo un término que empiece así y el mismo está con acento por ejemplo:”acústica”, no me lo trae porque el usuario no le puso acento. Entonces la idea… Leer mas »

KumbiaPHP

Hola Damina, eso que comentas sobre los acentos es algo va ligado con la BD y sobre el ordenamiento eso lo defines en el mismo query.

:up:

martha
martha

Hola buenas noches yo tengo un autocompletador solo que cuando lo ejecuto en mi pc funciona correctamente pero cuando lo subo a un servidor deja de funcionar que sera??? Agradece su ayuda

AnaB
AnaB

Hola excelente tuto! que posibilidad existe de que lo publiques para el Beta 2?????

KumbiaPHP

AnaB, realmente no hay nada extraordinario por hacer para llevarla al beta2… ademas piensa que esa no es un versión *oficial* y como tal no encontrarás nada *oficial*

AnaB
AnaB

si bueno, lo q pasa es q he tratado d hacerlo y no me funciona…

trackback

[…] Buscador jquery en Kumbiaphp beta2 Publicado el 17/10/2011 por willgum Fuente: https://paraisolinux.com/input-con-autocomplete-jquery-en-kumbiaphp/ […]