Buenas tardes colegas. estoy utilizando la función de autocompletado para realizar una busqueda. Resulta ser que funciona a la perfección. pero cuando escojo una de las sugerencias en el input se coloca automaticamente [object Object]... asi en texto, la función se cumple, osea se me muestran los resultados de la búsqueda en una sección de la página tal cual quiero, pero esto es un tanto molesto porque parecen esas letras en el input. Ya hice varias pruebas lanzando banderas en mi función jquery, igual les coloco el código a ver si alguien sabe porque se causa este error...
Aquí un pequeño screenshot para que tengan una idea
Este es el marcado
Código HTML:
Ver original<div id="ResultadosBusqueda" class="span5"> <div id="Buscador" class="pull-right" class=""> <input type="text" id="BuscarMotivo" class="input-medium search-query" placeholder="Buscar Motivo..." />
en el div id="ResultadosBusqueda" es donde se muestran los resultados, el contenido de esto lo llamo desde un archivo externo, y el div id="Buscador" es mi input...
Este es el archivo que me recibe un objeto con toda la data (Previamente se hizo la consulta y
$m es un objeto con la info) y hago un echo en formato json colocandole el elemento "
value" para retornarlo
Código PHP:
<?php
$m = $this->obtenerDato("motivoBuscado");
//var_dump($m[0]);
$cad = "[\n";
if (is_array($m)){
for ($i= 0 ; $i < count($m); $i++){
$o = $m[$i];
$cad .= "
{
\"label\":\"" . $o->obtenerDescripcion() . "(" . $o->obtenerId() . ")\",
\"value\":{\"id\":\"" . $o->obtenerId() . "\",\"descripcion\":\"" . $o->obtenerDescripcion() . "\",\"atribucionId\":\"" . $o->obtenerAtribucionId() . "\",\"pasaNomina\":\"" . $o->obtenerPasaNomina() . "\",\"finesSemana\":\"" . $o->obtenerFinesSemana() . "\",\"usuarioCreador\":\"" . $o->obtenerUsuarioCreador() . "\",\"fechaCreacion\":\"" . $o->obtenerFechaCreacion() . "\",\"usuarioModificador\":\"" . $o->obtenerUsuarioModificador() . "\",\"fechaModificacion\":\"" . $o->obtenerFechaModificacion() . "\"}
}";
if ($i < count($m) -1) {
$cad .= ", ";
}
$cad .= "\n";
}
}
$cad .= "]\n";
echo "$cad";
?>
La cadena $cad (ya en formato json) lo recibe el siguiente script
Código Javascript
:
Ver original//Para el buscador con autocompletado
$('#BuscarMotivo').autocomplete({
source: function( request, response ) {
$('#CargandoGif').show();
$.ajax({
type:"get",
dataType: "json",
url: "index.php",
data:{m_modulo:"motivo",
m_accion:"buscar",
m_vista:"buscado",
m_formato:"json",
patron: request.term
},
success: function(data){
$('#CargandoGif').hide();
return response(data);
},
error: function(data){
$('#CargandoGif').hide();
return response([{"label": "ERROR DE CONEXION", "value": {"id":""}}]);
}
});
},
//No le paren a esto, que esto es para llenar el div #ResultadosBusqueda, hago unas validaciones y armo un html
select : function(event,ui){
$('#ResultadosBusqueda').show('slow');
if (ui.item.value.atribucionId==1){
var atribucionDesc = 'Retraso en Minutos';
}else if (ui.item.atribucion==2){
var atribucionDesc = 'Ausentismo en Horas';
}else if (ui.item.atribucion==3){
var atribucionDesc = 'Ausentismo en Días';
}else if (ui.item.atribucion==4){
var atribucionDesc = 'Horas Extras';
}
//Se arma un html con la funcion .html donde se muestran los resultados
$("#BuscarMotivo").val(ui.item.value.id);
$('#ResultadosBusqueda').html(
'<table id =\'ResultadosTbl\' class=\'table table-bordered table-hover\'>'+
'<tr>'+
'<td colspan=\'2\'><h5>Resultado</h5></td>'+
'</tr>'+
'<tr>'+
'<td>Código</td><td>'+ui.item.value.id+'</td>'+
'</tr>'+
'<tr>'+
'<td>Descripción</td><td>'+ui.item.value.descripcion+'</td>'+
'</tr>' +
'<tr>'+
'<td>Categoría</td><td>'+atribucionDesc+'</td>'+
'</tr>'+
'<tr>'+
'<td>Pasa a Nómina</td><td>'+(ui.item.value.pasaNomina==1?'Si':'No')+'</td>'+
'</tr>'+
'<tr>'+
'<td>Fines de Semana</td><td>'+(ui.item.finesSemana==1?'Si':'No')+'</td>'+
'</tr>'+
'<tr>'+
'<td colspan=\'2\'><a href=\'#\' id=\'Ocultar\'>Ocultar</a>'+
'<button class=\'btn pull-right eliminar\' value=\''+ui.item.value.id+','+ui.item.value.descripcion+'\'>Eliminar<i class=\'icon-trash\'></i></button>'+
'<button class=\'btn pull-right editar\' value=\''+ui.item.value.id+','+ui.item.value.descripcion+','+ui.item.value.atribucionId+','+ui.item.value.pasaNomina+','+ui.item.finesSemana+'\'>Editar</button>'+
'</td>'+
'</tr>'+
'</table>'
);
$('#Ocultar').on('click',function(){
$('#ResultadosBusqueda').hide('slow');
});
//Dispara el modal de eliminar, la validación de los campos y la ejecución del ajax de eliminar
eliminar();
//Dispara el modal editar, la validación de los campos y la ejecución del ajax de editar
editar();
}
});
Espero haberme explicado bien... La verdad no hallo como solucionarlo, he puesto distintas banderas, alerts a medida que avanza el script, pero no logro saber donde se hace ese cambio...
Espero su ayuda colegas,, saludos.