jueves, 21 de agosto de 2014

Codeigniter - AutoComplete Jquery

Posted by daycry at 9:26 Labels: ,
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

No hay comentarios :

Publicar un comentario

Suscribirse a: Enviar comentarios ( Atom )