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