Autocompletar con Jquery UI en CodeIgniter

Hoy vamos a ver como hacer un autocompletar con jquery UI en CodeIgniter; la interfaz
de usuario de Jquery incluye una gran variedad de modulos para realizar distintas tareas
que pueden ser muy necesarias y sobre todo complejas a la hora de programar; quien desee
averiguar sobre los distintos modulos y sus funcionalidades puede visitar la web de Jquery UI, ahí encontraran las distintas versiones y sus respectivos Demos para entender
cómo funcionan; además se encuentra una gran variedad de temas. Para este ejemplo voy a usar
la librería completa, la cual incluye el Core, widgets y demás; todo en un solo archivo.

Paso 1

Descomprimimos CodeIgniter y renombramos la aplicación como ci_autocomplete_ui; en la raíz
de la aplicación creamos una carpeta y la llamamos js, dentro de esta guardamos las librerias
jquery-1.9.1, jquery-ui.js y algún tema de jquery ui, para este caso voy a utilizar el tema
humanity; cada tema trae tres archivos junto con sus imágenes, ya sea del tema humanity o
algún otro tomamos el que se llama jquery-ui.css y lo colocamos con los dos archivos js

Paso 2

vamos a ci_autocomplete_ui/application/config/ y abrimos database.php y colocamos los datos
para la conexión, en mi caso son estos:

$db['default']['hostname'] = 'localhost';
$db['default']['username'] = 'root';
$db['default']['password'] = '';
$db['default']['database'] = 'autocomplete';

estando en la misma carperta abrimos autoload.php y cargamos la libreria database, más o
menos por la linea 55

$autoload['libraries'] = array('database');

el último archivo que abrimos en la carpeta config es routes.php para definir el controlador
que va a cargar al iniciar la aplicación, más o menos por la linea 45

$route['default_controller'] = "autocomplete";

Paso 3
Vamos a phpmyadmin y creamos una base de datos llamada autocomplete, dentramos a esta y en
la pestaña SQL ejecutamos el siguiente código:

CREATE TABLE IF NOT EXISTS `framework` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `framework` varchar(120) COLLATE utf8_spanish_ci NOT NULL,
  `cms` varchar(120) COLLATE utf8_spanish_ci NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_spanish_ci AUTO_INCREMENT=5 ;


INSERT INTO `framework` (`id`, `framework`, `cms`) VALUES
(1, 'CodeIgniter', 'Wordpress'),
(2, 'Cake Php', 'Joomla'),
(3, 'Laravel', 'Drupal'),
(4, 'Yii ', 'Open Cart');

Paso 4
Vamos a ci_autocomplete_ui/application/models/, creamos un modelo con el nobre de
autocomplete_model.php y le colocamos el siguiete código:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Autocomplete_model extends CI_Model{

function __construct()
{  
        parent::__construct();
      
}

function get_data($item,$match) {
    
     $this->db->like($item, $match);
     $query = $this->db->get('framework');
   
return $query->result();        
}

}

Paso 5
En ci_autocomplete_ui/application/controllers/ creamos un controlador llamado
autocomplete.php y pegamos el siguiente código:

<?php

class Autocomplete extends CI_Controller {
   
function __construct()
{
        parent::__construct();
        $this->load->library('table');
        $this->load->model('Autocomplete_Model');      
}
   
function index()
{   
        $this->table->set_heading('Framework', 'CMS');
        $tmpl = array ( 'table_open'  => '<table border="1">' );
        $this->table->set_template($tmpl);
      
        $data['title'] = '.: Autocompletado con CI :.';
    // Seleccionamos la tabla con los campos que queremos mostrar; excluimos el id
         $this->db->select('framework, cms');
         $data['records'] = $this->db->get('framework');
        
        $this->load->view('autocomplete_view', $data);      
}

function get_data()
{
    $match = $this->input->get('term', TRUE);  // TRUE para hacer un filtrado XSS 
    $item = $this->input->get('item', TRUE);
   
    $data['item'] = $item;
    $data['results'] = $this->Autocomplete_Model->get_data($item,$match);
      
    $this->load->view('data',$data);  
}
   
}

Paso 6
Lo último que haremos es crear dos vistas, una será donde el usuario tendrá dos
campos de texto para que al escribir en alguno de ellos se desplieguen los registros
relacionados con su respectivo item; y la otra será la que le pasará los datos
a jquery para ejecutar el autocompletado. Los nombres de estas vista son
autocomplete_view.php y data.php, como se sabe estas deben ir en:
ci_autocomplete_ui/application/controllers/views/

Código de autocomplete_view.php

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="utf-8" />
    <title><?php echo $title; ?></title>
<style type="text/css">
#container { width: 500px; margin: auto;font-size:13px;}
table {width: 500px;margin-bottom: 10px;}
td {border-right: 1px solid #aaaaaa;padding: 1em;}       
</style>
<link rel="stylesheet" type="text/css" href="http://localhost/ci_autocomplete_ui/js/jquery-ui.css" />
<script src="http://localhost/ci_autocomplete_ui/js/jquery-1.9.1.js" type="text/javascript"></script>   
<script type="text/javascript" src="http://localhost/ci_autocomplete_ui/js/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(){

 $('tr:odd').css('background', '#e3e3e3');
 var url = 'index.php/autocomplete/get_data';

 $('#framework').autocomplete({
    source: url+'?item=framework'
  });
 
    $('#cms').autocomplete({
    source: url+'?item=cms'
  });

});   
</script>
</head>
<body>
<div id="container">
  <h2>Autocompletar con Jquery UI en CodeIgniter</h2>
  <h4 align="center"><?php echo "Seleccione de acuerdo a su preferencia tomando como referencia el listado de la tabla" ?></h4>
<label>Framework:</label>   
<input type="text" id="framework" size="15" />
<label>CMS:</label>   
<input type="text" id="cms" size="15" />
<?php echo $this->table->generate($records);  ?>
</div>
</body>
</html>    

Código de data.php

<?php

$j = 0;

foreach($results as $result){

  $records[$j] = array('id' => $result->id,
                       'label' => $result->$item,
                       'value' => $result->$item
                     );
 $j++;                 
}

echo json_encode($records);

De este modo ya debe funcionar el autocompletado, verificamos en el navegador con:
http://localhost/ci_autocomplete_ui

Descargar ejemplo