Paso 1: Preparando el terreno.
Primero tenemos que crear un controlador que yo le voy a llamar autocomplete, una vista con el mismo nombre y una base de datos de usuarios que se van a mostrar.
En el código del controlador debemos por ahora agregar la carga de nuestra vista y la carga de el driver para base de datos y el uri helper que nos ayudara.
Código de controlador inicial:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Autocomplete extends CI_Controller {
function __construct()
{
parent::__construct();
$this->load->database();
$this->load->helper('url');
}
public function index()
{
$this->load->view('autocomplete');
}
}
/* End of file welcome.php */
/* Location: ./application/controllers/autocomplete.php */
En el código de vista solo debemos poner el enlace a el css y js de jquery ui, para facilitarnos la vida nos ayudaremos con la función base_uri que nos permitirá darle una ruta absoluta.Código vista:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>jQuery UI Autocomplete Ejemplo</title> <link type="text/css" href="<?php echo base_url(); ?>css/dark-hive/jquery-ui-1.8.10.custom.css" rel="stylesheet" /> <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-ui-1.8.10.custom.min.js"></script> <script type="text/javascript"> </script> </head> <body> </body> </html>Y por ultimo crearemos una pequeña Base de datos de usuarios con solo un id y nombre de usuario, así:
CREATE TABLE `autocomplete`.`usuarios` ( `id` INT UNSIGNED NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`user` VARCHAR( 80 ) CHARACTER SET utf8 COLLATE utf8_general_ci NOT NULL );
INSERT INTO `usuarios` (`id`, `user`) VALUES
(1, 'mariano'),
(2, 'jose'),
(3, 'juan eduardo'),
(4, 'juan pedro'),
(5, 'no se uqe'),
(6, 'no se uqe mas'); Lo ultimo de este paso es configurar nuestra base de datos y ya debería cargar una pagina en blanco.
Paso 2: Configurando nuestra vista con autocomplete.
Ahora debemos configurar en la vista el autocomplete, solamente debemos agregar en el cuerpo un input text, y dentro de las etiquetas script la configuracion del autocomplete que va a ser referencia a una función que despues crearemos en nuestro controlador que se llamara ajax. Asi nos debería ir quedando la vista:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery UI Autocomplete Ejemplo</title>
<link type="text/css" href="<?php echo base_url(); ?>css/dark-hive/jquery-ui-1.8.10.custom.css" rel="stylesheet" />
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>js/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#autocomplete').autocomplete({source:'<?php echo site_url('autocomplete/ajax'); ?>'});
});
</script>
</head>
<body>
<p><label for='autocomplete'>Nombre de Usuario: </label><input type='text' id='autocomplete'></p>
</body>
</html>
Paso 3: Empezando con el controlador.(Input Class)En el controlador debemos crear una función llamada ajax que sera la encargada de enviar en formato json los datos para el autocomplete, para esto vamos a usar el Active Record Class de Codeigniter y el input class.
El codeigniter trae una clase ya echa y precargada para lo que son los input, esta libreria incluye funciones muy utiles:
- Pre-procesa todas las variables de entrada por seguridad.
- Provee algunas funciones para procesar las variables enviadas y pre-procesarlas.
if($buscar=$this->input->get('term'))
{
}
Paso 4: Usando Active Record Class para buscar en la base de datos.Continuamos con el active record class, esta clase trae funciones para seleccionar, insertar, eliminar y modificar ya predefinidas que nos pueden ahorrar muchas lineas de código ademas de que con estas funciones ya todo va pre-filtrado contra posibles ataques.
lo primero es ver la función basica de select, $query=$this->db->get('usuarios') esta función haria simplemente un "select * from usuarios" y devuelve un objeto en $query. Como queremos buscar dentro de user los usuarios que tengan un nombre parecido a el termino de busqueda, debemos usar la función $this->db->like(), que recibe dos parametros, en uno la columna en la que deseamos buscar y el otro lo que deseamos buscar. Y por ultimo usaremos la funcion $this->db->select(), para poder especificar que columnas queremos y como las queremos: a la final nuestra funcion nos quedaria asi:
$this->db->select('id, user as value');
$this->db->like('user', $buscar);
$query=$this->db->get('usuarios');
Que generaria algo asi "SELECT `id`, `user` as value FROM (`usuarios`) WHERE user` LIKE '%$buscar%'"
Ahora solo debemos verificar que la respuestasea mayor que 0, pero en ves de usar el clasico mysql_num_rows usaremos $query->num_rows() > 0, y para listar los resultados en ves de while ($row = mysql_fetch_array($result) ) usaremos foreach ($query->result_array() as $row). y por ultimo usamos la funcion json_encode para pasar nuestro array al formato json.
Condigo de la funcion ajax():
function ajax()
{
if($buscar = $this->input->get('term'))
{
$this->db->select('id, user as value');
$this->db->like('user', $buscar);
$query=$this->db->get('usuarios');
if($query->num_rows() > 0)
{
foreach ($query->result_array() as $row)
{
$result[]= $row;
}
}
echo json_encode($result);
}
}
Con esto ya queda listo nuestro autocomplete solo queda probarlo.
Nota:
- Si usan php 5 pueden usar el Method Chaining que les permite hacer los select en una sola linea.
- Es buena idea limitar el numero de filas que vamos a devolver con agregar $this->db->limit(10); es suficiente.
- Este metodo devulve el id de el usuario a el autocomplete, podemos agregar al autocomplete el siguiente codigo para usar en algo esa info:
select: function( event, ui ) { alert(ui.item ? "Selected: " + ui.item.id : "Nothing selected, input was " + this.value ); }
El resultado final esta en esta dirreccion: http://www.box.net/shared/agnursjr8n
