jueves, 21 de agosto de 2014
Codeigniter - AutoComplete Jquery
El mundo de la informática y de las páginas web, ha cambiado mucho en estos últimos años, ya que se han incorporado nuevas tecnologías muy útiles como por ejemplo Jquery, Bootstrap, TinyMCE,...Podría hacer un listado bastante grande, pero en este caso vamos a hablar de algo muy útil que tiene que contener toda página web existente, y es el tema de los formularios con campos autocomplete.
Este tipo de campos hacen la web mucho más dinámica, ya que dependiendo de lo que escribamos en dicho campo, empezaran a aparecer opciones que contengan el mismo patrón, como en la imágen que tenemos a la izquierda.
Programar este tipo de campos es relativamente sencillo, ya que simplemente debemos de pasar los datos que se obtengan de la consulta en formato Json, y autocomplete ya se encarga de mostrarlos.
Con estos sencillos pasos podremos realizar campos con función autocomplete, y la idea se puede utilizar para cualquier otro tipo de framework, o incluso PHP puro, sin utilización de framework,
ya que simplemente se indica la ruta del fichero que realizará la llamada a la base de datos y devolver un array de datos convertidos en Json.
Ejemplo
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv=Content-Type content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Title</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script> $(document).ready(function($){ $('#pais').autocomplete({ source:'<?php echo site_url('ejemplo/autocompletePais');?>', minLength:2, // optional html: true, // optional (if other layers overlap the autocomplete list) open: function(event, ui) { $(".ui-autocomplete").css("z-index", 1000); } }); }); </script> </head> <body> <?php echo"<input type='text' placeholder='Name' id='pais' name='pais' class='ui-autocomplete-input' autocomplete='off' />"; ?> </body> </html>
En el ejemplo anterior, se puede observar que hemos creado un campo de texto simplemente, sin ningún misterio, pero la clave y la gracia del autocomplete se encuentra en el código Javascript de la parte de arriba, donde el atributo source, se utiliza para indicar donde tiene que recoger los datos, y el atributo minLength, que indicamos que empiece a buscar los datos a partir de 2 caracteres introducidos en el campo
Al ser en Codeigniter, se lo indicamos mediante la función site_url, indicándole el controlador y la función que tiene que llamar.
La función que debemos de tener dentro de nuestro controlador es la siguiente:
public function autocompletePais(){ if (isset($_GET['term'])){ $q = strtolower($_GET['term']); $valores = $this->autocomplete->getAutocompletePaises($q); echo json_encode($valores); } }
Donde simplemente recogemos los caracteres introducidos con $_GET['term'], y pasamos los caracteres recogidos al nuestro modelo para realizar la consulta.
function getAutocompletePaisos($q){ $this->db->select('*'); $this->db->like('campo', $q); $query = $this->db->get('tabla_bbdd'); if($query->num_rows > 0){ foreach ($query->result_array() as $row){ $new_row['id'] = htmlentities(stripslashes($row['id'])); $new_row['value'] = utf8_encode($row['nombre_campo']); $row_set[] = $new_row; } return $row_set; } }
Esta función se encarga de devolver en forma de array, los atributos id, y el valor de los datos extraídos de la consulta.
Para mas información sobre atributos y funcionalidades de autocomplete, podéis consultar en el siguiente link: Autocomplete
Suscribirse a:
Enviar comentarios
(
Atom
)
Sígueme en las Redes Sociales
Donaciones
Datos personales
Entradas populares
-
En este apartado vamos a explicar como ejercutar archivos PHP a través del terminal de Ubuntu. Lo primero que tendríamos que hacer es inst...
-
En este blog voy a comentar un tema que se utilizan en casi todas las páginas web que existen, y es el tema de la paginación. La paginaci...
-
Este post trata de la integración de la librería PHPExcel en Codeigniter, aunque se podría aplicar a cualquier librería, como por ejemplo mP...
-
Ejemplo para añadir o sumar un número determinado de hora/s, minuto/s, segundo/s a una fecha en php. Con la función strtotime se puede ...
-
Este tema es uno de los temas primordiales sobre el framework Codeigniter, ya que en alguna ocación nos hemos visto obligados a recoger dato...
© Espacio Daycry - Espacio de programación 2013 . Powered by Bootstrap , Blogger templates and RWD Testing Tool
No hay comentarios :
Publicar un comentario