Ejemplo de input autocomplete con jquery ui

De KumbiaPHP Framework Wiki

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

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');


Creando el Modelo

El siguiente paso es crear un modelo llamado Estados en la carpeta models del proyecto app/models/estados.php:

<?php
class Estados extends ActiveRecord {

    public function obtener_json($estado) {
        if ($estado != '') {
            $res = $this->find('columns: estado', "estado like '%{$estado}%'");
            if ($res) {
                // creamos el formato json para el autocomplete ej: ["aragua","caracas"]
                foreach ($res as $estado) {
                    $estados[] = '"' . $estado->estado . '"';
                }
                return '[' . join(',', $estados) . ']';
            }
        }
        return '["no hubo coincidencias"]';
    }

}