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: | ||
− | |||
− | |||
=== Descripcion === | === Descripcion === | ||
Línea 34: | Línea 32: | ||
class Estados extends ActiveRecord { | class Estados extends ActiveRecord { | ||
− | public function | + | public function obtener_json($estado) { |
if ($estado != '') { | if ($estado != '') { | ||
− | |||
$res = $this->find('columns: estado', "estado like '%{$estado}%'"); | $res = $this->find('columns: estado', "estado like '%{$estado}%'"); | ||
if ($res) { | if ($res) { | ||
+ | // creamos el formato json para el autocomplete ej: ["aragua","caracas"] | ||
foreach ($res as $estado) { | foreach ($res as $estado) { | ||
− | $estados[] = $estado->estado; | + | $estados[] = '"' . $estado->estado . '"'; |
} | } | ||
− | return $estados; | + | return '[' . join(',', $estados) . ']'; |
} | } | ||
} | } | ||
− | return | + | return '["no hubo coincidencias"]'; |
} | } | ||
Línea 69: | Línea 67: | ||
//accion que busca en los estados y devuelve el json con los datos | //accion que busca en los estados y devuelve el json con los datos | ||
public function autocomplete() { | public function autocomplete() { | ||
− | + | if (Input::isAjax()) { //solo devolvemos los estados si se accede desde ajax | |
− | + | // autocomplete coloca al final de la url coloca una variable get term | |
− | if (Input::isAjax()) { //solo devolvemos los estados si se accede desde ajax | + | // con los datos ingresados en el input |
− | $busqueda = Input:: | + | $busqueda = Input::get('term'); |
− | $estados = Load::model('estados')-> | + | $estados = Load::model('estados')->obtener_json($busqueda); |
− | die | + | die($estados); // solo devolvemos los datos, sin template ni vista |
− | |||
} | } | ||
+ | die; | ||
} | } | ||
} | } | ||
</source> | </source> | ||
+ | |||
=== La Vista === | === La Vista === | ||
− | En la vista | + | En la vista crearemos un input de tipo texto y ademas añadiremos un codigo javascript para usar el autocomplete: |
<source lang=php> | <source lang=php> | ||
Línea 96: | Línea 95: | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
$('input#autocomplete').autocomplete({ | $('input#autocomplete').autocomplete({ | ||
− | |||
minLength : 2 , //le indicamos que busque a partir de haber escrito dos o mas caracteres en el input | minLength : 2 , //le indicamos que busque a partir de haber escrito dos o mas caracteres en el input | ||
− | + | source : <?php echo PUBLIC_PATH ?> + "index/autocomplete" //url donde buscará los estados | |
− | source : | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
}); | }); | ||
}); | }); | ||
Línea 128: | Línea 118: | ||
− | ==== | + | ==== Mostrando Coincidencias ==== |
Vista cuando NO existen coincidencias con a busqueda: | Vista cuando NO existen coincidencias con a busqueda: | ||
[[Archivo:Autocomplete_3.PNG]] | [[Archivo:Autocomplete_3.PNG]] | ||
− | |||
− | |||
− | |||
− | |||
− |