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 ms rpida, 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 instantnea de aadir la funcin de autocompletar a un campo de texto. El plugin convierte el campo de texto sencillo, en uno que tiene la caracterstica 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 librera jQuery UI.

Crear tabla de la base de datos

Para almacenar la informacin 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 informacin de las habilidades de la base de datos basndose en lo tecleado por el usuario. Genera un array clave valor con el id y la habilidad. Devuelve la informacin 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 funcin getRows() del modelo Skill, recupera informacin de la tabla skills basndose en ciertas condiciones y devuelva la informacin 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 funcin de autocompletar funcione. As que, tendrs que incluir la librera 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 funcin de autocompletar. Tambin debes definir la ruta hacia el archivo que se encargar de extraer la informacin.

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

Por ltimo, tendrs que crear el campo de texto:

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

Por defecto, despus de enviar el formulario, el valor del elemento se enviar como valor del autocompletador. Pero, en la mayora 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);
        }
    });
});

COMPARTE ESTE ARTÍCULO

ENVIAR A UN AMIGO
COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN GOOGLE +
¡SÉ EL PRIMERO EN COMENTAR!
Conéctate o Regístrate para dejar tu comentario.