https://wiki.kumbiaphp.com/api.php?action=feedcontributions&user=Lucker2&feedformat=atomKumbiaPHP Framework Wiki - Contribuciones del usuario [es]2024-03-28T15:03:43ZContribuciones del usuarioMediaWiki 1.34.1https://wiki.kumbiaphp.com/index.php?title=Ejemplo_de_input_autocomplete_con_jquery_ui&diff=4330Ejemplo de input autocomplete con jquery ui2018-04-03T17:52:20Z<p>Lucker2: Deshecha la revisión 4274 de Joanhey (disc.)</p>
<hr />
<div>[[Categoría:Tutoriales KumbiaPHP]]<br />
<br />
=== Descripcion ===<br />
<br />
En el siguiente ejemplo se muestra una manera de crear un input con autocompletado de texto, utilizando las librerias '''jquery''' y '''jquery-ui'''. El campo de texto servirá para buscar estados en una base de datos.<br />
<br />
=== Tabla a Utilizar ===<br />
<br />
<source lang=sql><br />
<br />
CREATE TABLE `estados` (<br />
`id` int(11) NOT NULL AUTO_INCREMENT,<br />
`estado` varchar(20) NOT NULL,<br />
PRIMARY KEY (`id`),<br />
UNIQUE KEY `estado` (`estado`)<br />
) ENGINE=InnoDB ;<br />
<br />
INSERT INTO `estados` (`estado`) VALUES<br />
('Amazonas'),('Anzoategui'),('Apure'),('aragua'),('Barinas'),('Bolívar'),<br />
('Carabobo'),('Cojedes'),('Delta Amacuro'),('Dist. Capital'),('Falcón'),<br />
('Guarico'),('Lara'),('Mérida'),('Miranda'),('Monagas'),('Nueva Esparta'),<br />
('Portuguesa'),('Sucre'),('Táchira'),('Trujillo'),('valencia'),('Vargas'),<br />
('Yaracuy'),('Zulia');<br />
<br />
</source><br />
<br />
<br />
=== Creando el Modelo ===<br />
<br />
El siguiente paso es crear un modelo llamado '''Estados''' en la carpeta models del proyecto: '''app/models/estados.php'''<br />
<br />
<source lang=php><br />
<?php<br />
class Estados extends ActiveRecord {<br />
<br />
public function obtener_estados($estado) {<br />
if ($estado != '') {<br />
$estado = stripcslashes($estado);<br />
$res = $this->find('columns: estado', "estado like '%{$estado}%'");<br />
if ($res) {<br />
foreach ($res as $estado) {<br />
$estados[] = $estado->estado;<br />
}<br />
return $estados;<br />
}<br />
}<br />
return array('no hubo coincidencias');<br />
}<br />
<br />
}<br />
<br />
</source><br />
<br />
<br />
=== Creando el Controlador ===<br />
<br />
Ahora crearemos un controlador para probar el ejemplo, en este caso usaremos el controlador '''IndexController''' ('''index_controller.php'''):<br />
<br />
<source lang=php><br />
<?php<br />
<br />
class IndexController extends AppController {<br />
<br />
//accion con la vista del input autocomplete<br />
public function index() {<br />
<br />
}<br />
<br />
//accion que busca en los estados y devuelve el json con los datos<br />
public function autocomplete() {<br />
View::template(NULL);<br />
View::select(NULL);<br />
if (Input::isAjax()) { //solo devolvemos los estados si se accede desde ajax <br />
$busqueda = Input::post('busqueda');<br />
$estados = Load::model('estados')->obtener_estados($busqueda);<br />
die(json_encode($estados)); // solo devolvemos los datos, sin template ni vista<br />
//json_encode nos devolverá el array en formato json ["aragua","carabobo","..."]<br />
}<br />
}<br />
}<br />
<br />
</source><br />
<br />
=== La Vista ===<br />
<br />
En la vista ('''index/index.phtml''') crearemos un input de tipo texto y ademas añadiremos un codigo javascript para usar el autocomplete:<br />
<br />
<source lang=php><br />
<br />
<h1>Probando Autocomplete</h1><br />
<?php View::content() ?><br />
<br />
<?php echo Form::text('autocomplete') ?><br />
<br />
<script type="text/javascript" ><br />
$(document).ready(function(){<br />
$('input#autocomplete').autocomplete({<br />
<br />
minLength : 2 , //le indicamos que busque a partir de haber escrito dos o mas caracteres en el input<br />
<br />
source : function( request , response ){<br />
<br />
var url = "<?php echo PUBLIC_PATH ?>index/autocomplete"; //url donde buscará los estados<br />
<br />
$.post(url, { 'busqueda' : request.term }, response, 'json');<br />
<br />
//busqueda es la varible que mandaremos por post con el contenido del input<br />
}<br />
});<br />
});<br />
</script><br />
<br />
<br />
</source><br />
<br />
=== Probando Todo ===<br />
<br />
Aquí tenemos la [http://www.repareco.es pantalla] con el input para el autocompletado de código:<br />
<br />
[[Archivo:Autocomplete_1.PNG]]<br />
<br />
<br />
==== Mostrando Coincidencias ====<br />
<br />
Si existen coincidencias con a busqueda, serán mostradas de la siguiente manera:<br />
<br />
[[Archivo:Autocomplete_2.PNG]]<br />
<br />
<br />
==== Cuando no hay Coincidencias ====<br />
<br />
Vista cuando NO existen coincidencias con a busqueda:<br />
<br />
[[Archivo:Autocomplete_3.PNG]]<br />
<br />
<br />
----<br />
<br />
Realizado por: Manuel Aguirre (manuel_j555)</div>Lucker2https://wiki.kumbiaphp.com/index.php?title=Ejemplo_de_input_autocomplete_con_jquery_ui&diff=4273Ejemplo de input autocomplete con jquery ui2017-04-07T10:16:50Z<p>Lucker2: </p>
<hr />
<div>[[Categoría:Tutoriales KumbiaPHP]]<br />
<br />
=== Descripcion ===<br />
<br />
En el siguiente ejemplo se muestra una manera de crear un input con autocompletado de texto, utilizando las librerias '''jquery''' y '''jquery-ui'''. El campo de texto servirá para buscar estados en una base de datos.<br />
<br />
=== Tabla a Utilizar ===<br />
<br />
<source lang=sql><br />
<br />
CREATE TABLE `estados` (<br />
`id` int(11) NOT NULL AUTO_INCREMENT,<br />
`estado` varchar(20) NOT NULL,<br />
PRIMARY KEY (`id`),<br />
UNIQUE KEY `estado` (`estado`)<br />
) ENGINE=InnoDB ;<br />
<br />
INSERT INTO `estados` (`estado`) VALUES<br />
('Amazonas'),('Anzoategui'),('Apure'),('aragua'),('Barinas'),('Bolívar'),<br />
('Carabobo'),('Cojedes'),('Delta Amacuro'),('Dist. Capital'),('Falcón'),<br />
('Guarico'),('Lara'),('Mérida'),('Miranda'),('Monagas'),('Nueva Esparta'),<br />
('Portuguesa'),('Sucre'),('Táchira'),('Trujillo'),('valencia'),('Vargas'),<br />
('Yaracuy'),('Zulia');<br />
<br />
</source><br />
<br />
<br />
=== Creando el Modelo ===<br />
<br />
El siguiente paso es crear un modelo llamado '''Estados''' en la carpeta models del proyecto: '''app/models/estados.php'''<br />
<br />
<source lang=php><br />
<?php<br />
class Estados extends ActiveRecord {<br />
<br />
public function obtener_estados($estado) {<br />
if ($estado != '') {<br />
$estado = stripcslashes($estado);<br />
$res = $this->find('columns: estado', "estado like '%{$estado}%'");<br />
if ($res) {<br />
foreach ($res as $estado) {<br />
$estados[] = $estado->estado;<br />
}<br />
return $estados;<br />
}<br />
}<br />
return array('no hubo coincidencias');<br />
}<br />
<br />
}<br />
<br />
</source><br />
<br />
<br />
=== Creando el Controlador ===<br />
<br />
Ahora crearemos un controlador para probar el ejemplo, en este caso usaremos el controlador '''IndexController''' ('''index_controller.php'''):<br />
<br />
<source lang=php><br />
<?php<br />
<br />
class IndexController extends AppController {<br />
<br />
//accion con la vista del input autocomplete<br />
public function index() {<br />
<br />
}<br />
<br />
//accion que busca en los estados y devuelve el json con los datos<br />
public function autocomplete() {<br />
View::template(NULL);<br />
View::select(NULL);<br />
if (Input::isAjax()) { //solo devolvemos los estados si se accede desde ajax <br />
$busqueda = Input::post('busqueda');<br />
$estados = Load::model('estados')->obtener_estados($busqueda);<br />
die(json_encode($estados)); // solo devolvemos los datos, sin template ni vista<br />
//json_encode nos devolverá el array en formato json ["aragua","carabobo","..."]<br />
}<br />
}<br />
}<br />
<br />
</source><br />
<br />
=== La Vista ===<br />
<br />
En la vista ('''index/index.phtml''') crearemos un input de tipo texto y ademas añadiremos un codigo javascript para usar el autocomplete:<br />
<br />
<source lang=php><br />
<br />
<h1>Probando Autocomplete</h1><br />
<?php View::content() ?><br />
<br />
<?php echo Form::text('autocomplete') ?><br />
<br />
<script type="text/javascript" ><br />
$(document).ready(function(){<br />
$('input#autocomplete').autocomplete({<br />
<br />
minLength : 2 , //le indicamos que busque a partir de haber escrito dos o mas caracteres en el input<br />
<br />
source : function( request , response ){<br />
<br />
var url = "<?php echo PUBLIC_PATH ?>index/autocomplete"; //url donde buscará los estados<br />
<br />
$.post(url, { 'busqueda' : request.term }, response, 'json');<br />
<br />
//busqueda es la varible que mandaremos por post con el contenido del input<br />
}<br />
});<br />
});<br />
</script><br />
<br />
<br />
</source><br />
<br />
=== Probando Todo ===<br />
<br />
Aquí tenemos la [http://www.repareco.es pantalla] con el input para el autocompletado de código:<br />
<br />
[[Archivo:Autocomplete_1.PNG]]<br />
<br />
<br />
==== Mostrando Coincidencias ====<br />
<br />
Si existen coincidencias con a busqueda, serán mostradas de la siguiente manera:<br />
<br />
[[Archivo:Autocomplete_2.PNG]]<br />
<br />
<br />
==== Cuando no hay Coincidencias ====<br />
<br />
Vista cuando NO existen coincidencias con a busqueda:<br />
<br />
[[Archivo:Autocomplete_3.PNG]]<br />
<br />
<br />
----<br />
<br />
Realizado por: Manuel Aguirre (manuel_j555)</div>Lucker2