Ver Mensaje Individual
  #1 (permalink)  
Antiguo 28/05/2013, 14:57
MagoMarlon
 
Fecha de Ingreso: junio-2012
Ubicación: Venezuela
Mensajes: 68
Antigüedad: 12 años, 6 meses
Puntos: 6
Pregunta [object Object] En autocompletado jQuery

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
  1. <div id="ResultadosBusqueda" class="span5">
  2. </div> 
  3. <div id="Buscador" class="pull-right" class="">
  4.     <input type="text" id="BuscarMotivo" class="input-medium search-query" placeholder="Buscar Motivo..." />       
  5. </div>

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$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
  1. //Para el buscador con autocompletado
  2.     $('#BuscarMotivo').autocomplete({
  3.         source: function( request, response ) {
  4.                 $('#CargandoGif').show();
  5.                     $.ajax({                
  6.                         type:"get",
  7.                         dataType: "json",
  8.                         url: "index.php",
  9.                         data:{m_modulo:"motivo",            
  10.                                 m_accion:"buscar",
  11.                                 m_vista:"buscado",
  12.                                 m_formato:"json",
  13.                                 patron: request.term  
  14.                         },
  15.                         success: function(data){  
  16.                                         $('#CargandoGif').hide();
  17.                                         return response(data);  
  18.                                 },
  19.                         error: function(data){
  20.                                     $('#CargandoGif').hide();
  21.                                     return response([{"label": "ERROR DE CONEXION", "value": {"id":""}}]);
  22.                                 }
  23.                     });
  24.                 },
  25.         //No le paren a esto, que esto es para llenar el div #ResultadosBusqueda, hago unas validaciones y armo un html
  26.  
  27.         select : function(event,ui){
  28.             $('#ResultadosBusqueda').show('slow');
  29.             if (ui.item.value.atribucionId==1){
  30.                 var atribucionDesc = 'Retraso en Minutos';
  31.             }else if (ui.item.atribucion==2){
  32.                 var atribucionDesc = 'Ausentismo en Horas';
  33.             }else if (ui.item.atribucion==3){
  34.                 var atribucionDesc = 'Ausentismo en Días';
  35.             }else if (ui.item.atribucion==4){
  36.                 var atribucionDesc = 'Horas Extras';
  37.             }
  38.             //Se arma un html con la funcion .html donde se muestran los resultados
  39.             $("#BuscarMotivo").val(ui.item.value.id);
  40.            
  41.             $('#ResultadosBusqueda').html(
  42.                 '<table id =\'ResultadosTbl\' class=\'table table-bordered table-hover\'>'+
  43.                     '<tr>'+
  44.                         '<td colspan=\'2\'><h5>Resultado</h5></td>'+
  45.                     '</tr>'+
  46.                     '<tr>'+
  47.                         '<td>Código</td><td>'+ui.item.value.id+'</td>'+
  48.                     '</tr>'+
  49.                     '<tr>'+
  50.                         '<td>Descripción</td><td>'+ui.item.value.descripcion+'</td>'+
  51.                     '</tr>' +
  52.                     '<tr>'+
  53.                         '<td>Categoría</td><td>'+atribucionDesc+'</td>'+
  54.                     '</tr>'+
  55.                     '<tr>'+
  56.                         '<td>Pasa a Nómina</td><td>'+(ui.item.value.pasaNomina==1?'Si':'No')+'</td>'+
  57.                     '</tr>'+
  58.                     '<tr>'+
  59.                         '<td>Fines de Semana</td><td>'+(ui.item.finesSemana==1?'Si':'No')+'</td>'+
  60.                     '</tr>'+
  61.                     '<tr>'+
  62.                         '<td colspan=\'2\'><a href=\'#\' id=\'Ocultar\'>Ocultar</a>'+
  63.                         '<button class=\'btn pull-right eliminar\' value=\''+ui.item.value.id+','+ui.item.value.descripcion+'\'>Eliminar<i class=\'icon-trash\'></i></button>'+
  64.                         '<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>'+
  65.                         '</td>'+
  66.                     '</tr>'+
  67.                 '</table>'
  68.                 );
  69.  
  70.             $('#Ocultar').on('click',function(){
  71.                 $('#ResultadosBusqueda').hide('slow');
  72.             });
  73.             //Dispara el modal de eliminar, la validación de los campos y la ejecución del ajax de eliminar
  74.             eliminar();
  75.             //Dispara el modal editar, la validación de los campos y la ejecución del ajax de editar
  76.             editar();
  77.         }
  78.     });


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.