Edición de «Ejemplo de input autocomplete con jquery ui»

De KumbiaPHP Framework Wiki

Advertencia: no has iniciado sesión. Tu dirección IP se hará pública si haces cualquier edición. Si inicias sesión o creas una cuenta, tus ediciones se atribuirán a tu nombre de usuario, además de otros beneficios.

Puedes deshacer la edición. Antes de deshacer la edición, comprueba la siguiente comparación para verificar que realmente es lo que quieres hacer, y entonces guarda los cambios para así efectuar la reversión.

Revisión actual Tu texto
Línea 1: Línea 1:
[[Categoría:Tutoriales KumbiaPHP]]
+
#REDIRECT [[Manuel j5551]]
 
 
=== Descripcion ===
 
 
 
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.
 
 
 
=== Tabla a Utilizar ===
 
 
 
<source lang=sql>
 
 
 
CREATE TABLE `estados` (
 
  `id` int(11) NOT NULL AUTO_INCREMENT,
 
  `estado` varchar(20) NOT NULL,
 
  PRIMARY KEY (`id`),
 
  UNIQUE KEY `estado` (`estado`)
 
) ENGINE=InnoDB ;
 
 
 
INSERT INTO `estados` (`estado`) VALUES
 
('Amazonas'),('Anzoategui'),('Apure'),('aragua'),('Barinas'),('Bolívar'),
 
('Carabobo'),('Cojedes'),('Delta Amacuro'),('Dist. Capital'),('Falcón'),
 
('Guarico'),('Lara'),('Mérida'),('Miranda'),('Monagas'),('Nueva Esparta'),
 
('Portuguesa'),('Sucre'),('Táchira'),('Trujillo'),('valencia'),('Vargas'),
 
('Yaracuy'),('Zulia');
 
 
 
</source>
 
 
 
 
 
=== Creando el Modelo ===
 
 
 
El siguiente paso es crear un modelo llamado '''Estados''' en la carpeta models del proyecto: '''app/models/estados.php'''
 
 
 
<source lang=php>
 
<?php
 
class Estados extends ActiveRecord {
 
 
 
    public function obtener_estados($estado) {
 
        if ($estado != '') {
 
            $estado = stripcslashes($estado);
 
            $res = $this->find('columns: estado', "estado like '%{$estado}%'");
 
            if ($res) {
 
                foreach ($res as $estado) {
 
                    $estados[] = $estado->estado;
 
                }
 
                return $estados;
 
            }
 
        }
 
        return array('no hubo coincidencias');
 
    }
 
 
 
}
 
 
 
</source>
 
 
 
 
 
=== Creando el Controlador ===
 
 
 
Ahora crearemos un controlador para probar el ejemplo, en este caso usaremos el controlador '''IndexController''' ('''index_controller.php'''):
 
 
 
<source lang=php>
 
<?php
 
 
 
class IndexController extends AppController {
 
 
 
    //accion con la vista del input autocomplete
 
    public function index() {
 
 
 
    }
 
 
 
    //accion que busca en los estados y devuelve el json con los datos
 
    public function autocomplete() {
 
        View::template(NULL);
 
        View::select(NULL);
 
        if (Input::isAjax()) { //solo devolvemos los estados si se accede desde ajax
 
            $busqueda = Input::post('busqueda');
 
            $estados = Load::model('estados')->obtener_estados($busqueda);
 
            die(json_encode($estados)); // solo devolvemos los datos, sin template ni vista
 
            //json_encode nos devolverá el array en formato json ["aragua","carabobo","..."]
 
        }
 
    }
 
}
 
 
 
</source>
 
 
 
=== La Vista ===
 
 
 
En la vista ('''index/index.phtml''') crearemos un input de tipo texto y ademas añadiremos un codigo javascript para usar el autocomplete:
 
 
 
<source lang=php>
 
 
 
<h1>Probando Autocomplete</h1>
 
<?php View::content() ?>
 
 
 
<?php echo Form::text('autocomplete') ?>
 
 
 
<script type="text/javascript" >
 
    $(document).ready(function(){
 
        $('input#autocomplete').autocomplete({
 
 
 
            minLength : 2 , //le indicamos que busque a partir de haber escrito dos o mas caracteres en el input
 
 
 
            source : function( request , response ){
 
 
 
                var url = "<?php echo PUBLIC_PATH ?>index/autocomplete";  //url donde buscará los estados
 
 
 
                $.post(url, { 'busqueda' : request.term }, response, 'json');
 
 
 
                //busqueda es la varible que mandaremos por post con el contenido del input
 
            }
 
        });
 
    });
 
</script>
 
 
 
 
 
</source>
 
 
 
=== Probando Todo ===
 
 
 
Aquí tenemos la pantalla con el input para el autocompletado de código:
 
 
 
[[Archivo:Autocomplete_1.PNG‎]]
 
 
 
 
 
==== Mostrando Coincidencias ====
 
 
 
Si existen coincidencias con a busqueda, serán mostradas de la siguiente manera:
 
 
 
[[Archivo:Autocomplete_2.PNG‎]]
 
 
 
 
 
==== Cuando no hay Coincidencias ====
 
 
 
Vista cuando NO existen coincidencias con a busqueda:
 
 
 
[[Archivo:Autocomplete_3.PNG‎]]
 
 
 
 
 
----
 
 
 
Realizado por: Manuel Aguirre (manuel_j555)
 

Ten en cuenta que todas las contribuciones a KumbiaPHP Framework Wiki pueden ser editadas, modificadas o eliminadas por otros colaboradores. Si no deseas que las modifiquen sin limitaciones, no las publiques aquí.
Al mismo tiempo, asumimos que eres el autor de lo que escribiste, o lo copiaste de una fuente en el dominio público o con licencia libre (véase Proyecto:Derechos de autor para más detalles). ¡No uses textos con copyright sin permiso!

Para editar esta página, responde la pregunta que aparece abajo (más información):

Cancelar Ayuda de edición (se abre en una ventana nueva)