Autocompletador en CodeIgniter mediante jQuery UI

Un autocompletador ayuda a los usuarios a encontrar y seleccionar un valor dentro de una lista de valores dados. Proporciona sugerencias cuando un usuario escribe en un campo de texto. Generalmente, estas cajas de texto se suelen utilizar en buscadores donde el usuario puede encontrar, de manera más rápida, lo que esté buscando. Con jQuery UI puedes implementar de forma sencilla un autocompletador en tu sitio web. El plugin jQuery UI Autocomplete es una manera instantánea de añadir la función de autocompletar a un campo de texto. El plugin convierte el campo de texto sencillo, en uno que tiene la característica de un autocompletador. Al escribir dentro del autocompletador, el plugin comenzará a buscar valores que concuerden con lo escrito y los listará para que el usuario pueda seleccionarlos.

En muchas aplicaciones web, los autocompletadores extraen las sugerencias de la base de datos y permiten al usuario escoger entre las que concuerdan con lo escrito. En este tutorial haremos precisamente eso, un autocompletador alimentado por una tabla MySQL, la cual almacenará habilidades, en CodeIgniter mediante la librería jQuery UI.

Crear tabla de la base de datos

Para almacenar la información sobre las habilidades debemos crear una tabla en la base de datos. La siguiente sentencia SQL crea la tabla skills en la base de datos MySQL.

CREATE TABLE `skills` (
 `id` int(11) NOT NULL AUTO_INCREMENT,
 `skill` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
 `status` enum('1','0') COLLATE utf8_unicode_ci NOT NULL DEFAULT '1',
 PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Controlador (Skills.php)

El controlador Skills cuenta con tres funciones, __construct(), index() y autocompleteData().

• __construct() - Carga el modelo Skill para extraer habilidades de la base de datos
• index() - Carga la vista para mostrar el autocompletador de habilidades
• autocompleteData() - Extrae la información de las habilidades de la base de datos basándose en lo tecleado por el usuario. Genera un array clave valor con el id y la habilidad. Devuelve la información de las habilidades en formato JSON.

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

class Skills extends CI_Controller
{
    function __construct() {
        parent::__construct();
        // Load skill model
        $this->load->model('skill');
    }
    
    public function index(){
        // Load the view
        $this->load->view('skills/index');
    }
    
    function autocompleteData() {
        $returnData = array();
        
        // Get skills data
        $conditions['searchTerm'] = $this->input->get('term');
        $conditions['conditions']['status'] = '1';
        $skillData = $this->skill->getRows($conditions);
        
        // Generate array
        if(!empty($skillData)){
            foreach ($skillData as $row){
                $data['id'] = $row['id'];
                $data['value'] = $row['skill'];
                array_push($returnData, $data);
            }
        }
        
        // Return results as json encoded array
        echo json_encode($returnData);die;
    }
}

Modelo (Skill.php)

La funciín getRows() del modelo Skill, recupera información de la tabla skills basándose en ciertas condiciones y devuelva la información como un array.

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

class Skill extends CI_Model{
    function __construct() {
        $this->dbTbl = 'skills';
    }
    
    /*
     * Get rows from the skills table
     */
    function getRows($params = array()){
        $this->db->select("*");
        $this->db->from($this->dbTbl);
        
        //fetch data by conditions
        if(array_key_exists("conditions",$params)){
            foreach ($params['conditions'] as $key => $value) {
                $this->db->where($key,$value);
            }
        }
        
        //search by terms
        if(!empty($params['searchTerm'])){
            $this->db->like('skill', $params['searchTerm']);
        }
        
        $this->db->order_by('skill', 'asc');
        
        if(array_key_exists("id",$params)){
            $this->db->where('id',$params['id']);
            $query = $this->db->get();
            $result = $query->row_array();
        }else{
            $query = $this->db->get();
            $result = ($query->num_rows() > 0)?$query->result_array():FALSE;
        }

        //return fetched data
        return $result;
    }
}

Vista (skills/index.php)

Necesitamos jQuery UI para que la función de autocompletar funcione. Así que, tendrás que incluir la librería jQuery y la de jQuery UI.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Debes definir el ID del elemento que quieres que tenga la función de autocompletar. También debes definir la ruta hacia el archivo que se encargará de extraer la información.

<script>
$(function() {
    $("#skill_input").autocomplete({
        source: "<?php echo base_url('skills/autocompleteData'); ?>",
    });
});
</script>

Por último, tendrás que crear el campo de texto:

<div class="auto-widget">
    <p>Your Skills: <input type="text" id="skill_input"/></p>
</div>

Por defecto, después de enviar el formulario, el valor del elemento se enviará como valor del autocompletador. Pero, en la mayoría de los casos, lo que en realidad querremos será el ID. Mediante el evento select, puedes reemplazar el valor del campo input por su ID.

$(function() {
    $("#skill_input").autocomplete({
        source: "<?php echo base_url('skills/autocompleteData'); ?>",
        select: function( event, ui ) {
            event.preventDefault();
            $("#skill_input").val(ui.item.id);
        }
    });
});