Foros del Web » Programando para Internet » Javascript »

problema con autocompletar

Estas en el tema de problema con autocompletar en el foro de Javascript en Foros del Web. Hola, estoy intentando de usar el autocompletar de jquery ui, pero no lo estoy logrando, cuando empiezo a escribir en el input me sale la ...
  #1 (permalink)  
Antiguo 03/11/2010, 17:38
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 19 años, 4 meses
Puntos: 43
problema con autocompletar

Hola,
estoy intentando de usar el autocompletar de jquery ui, pero no lo estoy logrando, cuando empiezo a escribir en el input me sale la lista pero no me imprime nada, esta es la pantalla:


el codigo de js es:
Código Javascript:
Ver original
  1. $("#producto").autocomplete({
  2.         source: "index.php?controlador=index&accion=listado",
  3.         minLength: 1,
  4.         select: function(event, ui) {
  5.         $('#precio').val(ui.item.precio);
  6.         $('#idproductos').val(ui.item.idproductos);
  7.         $('#producto').val(ui.item.nombre);
  8.         }
  9.     });

el html es:
Código HTML:
Ver original
  1. <form action="#" method="post" id="suma" onsubmit="submitAjax(this.id,'index.php?controlador=index&amp;accion=tabla','tabla',1);" class="form label-inline" enctype="multipart/form-data">
  2.         <div class="portlet portlet-closable">
  3.  
  4.         <div class="portlet-header">
  5.             <h4>Venta Actual</h4>
  6.  
  7.         </div> <!-- .portlet-header -->
  8.  
  9.         <div class="portlet-content">
  10.  
  11.             <div id="inline-form" style="width: 569px;">
  12.  
  13.             <div class="field">
  14.                 <div class="ui-widget">
  15.                 <label for="producto">Nombre Producto: </label>
  16.                 <input id="producto" name="producto" value=""/>
  17.                 <input id="precio" name="precio" type="hidden" value=""/>
  18.                 <input id="idproductos" name="idproductos" type="hidden" value=""/>
  19.                 <span><strong>Cantidad: </strong></span>
  20.                 <input id="cantidad" name="cantidad" size="4" type="text" class="xsmall" onchange="validarCantidad(this.value)" />
  21.                 <button type="submit"><span>Sumar</span></button>
  22.                 </div>
  23.                
  24.             </div>
  25.            
  26.             <div class="buttonrow">
  27.                 <input type="hidden" name="id_user" value="<?php echo $datos->id_user;?>"/>
  28.                 <button type="submit"><span>Cerrar Venta</span></button>
  29.             </div>
  30.  
  31.             </div> <!-- #horizontal-form -->
  32.             <div id="tabla">
  33.            
  34.             </div>
  35.  
  36.  
  37.         </div> <!-- .portlet-content -->
  38.  
  39.         </div> <!-- .portlet -->
  40.  
  41.     </form>

y el php que me devuelve los datos es asi:
Código PHP:
Ver original
  1. public function listado(){
  2.         $prod = $this->Productos->listadoProductos($_REQUEST);     
  3.        
  4.         for($i=0;$i<count($prod);$i++){
  5.         $datos [$i]['nombre'] = $prod[$i]['nombre'];
  6.         $datos [$i]['idproductos'] = $prod[$i]['idproductos'];
  7.         $datos [$i]['precio'] = $prod[$i]['precio'];
  8.         }
  9.        
  10.         echo json_encode($datos);
  11.     }

que estoy haciendo mal?
desde ya muchas gracias
  #2 (permalink)  
Antiguo 04/11/2010, 05:08
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 18 años, 11 meses
Puntos: 839
Respuesta: problema con autocompletar

El problema es el formato del array que estás enviando. Debe ser solamente un array con los valores:
Código Javascript:
Ver original
  1. ["c++", "javascript", "php"]
O, un array con objetos que tengan la propiedad label y value:
Código Javascript:
Ver original
  1. [{label: "c++", value: 1}, {label: "javascript", value: 2}, "php"]
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 04/11/2010, 13:15
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 19 años, 4 meses
Puntos: 43
Respuesta: problema con autocompletar

Cita:
Iniciado por David Ver Mensaje
El problema es el formato del array que estás enviando. Debe ser solamente un array con los valores:
Código Javascript:
Ver original
  1. ["c++", "javascript", "php"]
O, un array con objetos que tengan la propiedad label y value:
Código Javascript:
Ver original
  1. [{label: "c++", value: 1}, {label: "javascript", value: 2}, "php"]
Hola david,
la funcion en php me devuelve asi el arreglo:
Cita:
[{"nombre":"Malboro Box","idproductos":"1","precio":"3.5"},{"nombre":" Malboro Comun","idproductos":"2","precio":"4"},{"nombre":" Malboro 10","idproductos":"3","precio":"3"}]
no es esta bien eso?

salu2
  #4 (permalink)  
Antiguo 04/11/2010, 13:41
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 15 años, 8 meses
Puntos: 105
Respuesta: problema con autocompletar

Aver prueba asi:

Código Javascript:
Ver original
  1. var data = $.ajax({
  2.     url: "index.php",
  3.     type: "GET",
  4.     data: "controlador=index&accion=listado"
  5. }).responseText;
  6. $("#producto").autocomplete(data, {
  7.     formatItem: function(item){
  8.         return item.nombre;
  9.     }
  10. }).result(function(event, item){
  11.     $('#precio').val(item.precio);
  12.     $('#idproductos').val(item.idproductos);
  13.     $('#producto').val(item.nombre);
  14. });

Si no funciona.... o es algo que se me paso o es que usas una libreria autocomplete jquery diferente a la que pense.... en todo caso dinos que autocomente usas ^^

Suerte
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #5 (permalink)  
Antiguo 04/11/2010, 14:07
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 19 años, 4 meses
Puntos: 43
Respuesta: problema con autocompletar

masterojitos:
probé como marcaste pero tampoco funciono, a parte en la consola de firebug me tira este error:
Cita:
$("#producto").autocomplete(data, {formatItem: function (item) {return item.nombre;}}).result is not a function
[Break on this error] }).result(function(event, item){
y como a esta funcion la tengo dentro del:
Código Javascript:
Ver original
  1. $(document).ready(
  2.     function() {
se ejecutaba al cargar la pagina.
La version que estoy usando es la ultima que esta para descargar del sitio de jquery ui, el jquery ui es el jquery-ui-1.8.6.custom.min.js y el jquery es el 1.4.2.min.js
  #6 (permalink)  
Antiguo 04/11/2010, 14:31
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.931
Antigüedad: 15 años, 8 meses
Puntos: 105
Respuesta: problema con autocompletar

Ah usas el de UI....
Yo te respondi un plugin autocomplete de jquery, mira:
http://docs.jquery.com/Plugins/autocomplete

Pero bueno, en todo caso tu codigo lo veo bien... ya que cumple con este ejemplo:
http://jqueryui.com/demos/autocomplete/#custom-data

En todo caso, muestra un alert de lo que retorna index.php?controlador=index&accion=listado ya que ahi estaria el problema supongo....

Suerte
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #7 (permalink)  
Antiguo 04/11/2010, 15:06
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 18 años, 11 meses
Puntos: 839
Respuesta: problema con autocompletar

Cita:
Iniciado por destor77 Ver Mensaje
Hola david,
la funcion en php me devuelve asi el arreglo:


no es esta bien eso?

salu2
No, no es correcto, debe ser como te indiqué; o por lo menos así lo indica la documentación.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #8 (permalink)  
Antiguo 04/11/2010, 18:21
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 19 años, 4 meses
Puntos: 43
Respuesta: problema con autocompletar

Bueno, la verdad que no entiendo que es lo que pasa, en el ejemplo de:
http://jqueryui.com/demos/autocomplete/#custom-data
arma el arreglo asi:
Código Javascript:
Ver original
  1. var projects = [
  2.             {
  3.                 value: "jquery",
  4.                 label: "jQuery",
  5.                 desc: "the write less, do more, JavaScript library",
  6.                 icon: "jquery_32x32.png"
  7.             },
  8.             {
  9.                 value: "jquery-ui",
  10.                 label: "jQuery UI",
  11.                 desc: "the official user interface library for jQuery",
  12.                 icon: "jqueryui_32x32.png"
  13.             },
  14.             {
  15.                 value: "sizzlejs",
  16.                 label: "Sizzle JS",
  17.                 desc: "a pure-JavaScript CSS selector engine",
  18.                 icon: "sizzlejs_32x32.png"
  19.             }
  20.         ];

y mi funcion php:
Código PHP:
Ver original
  1. $prod = $this->Productos->listadoProductos($_REQUEST);     
  2.         $datos = "[";
  3.         for($i=0;$i<count($prod);$i++){
  4.         $datos .= '{value: "'.$prod[$i]['nombre'].'",label: "'.$prod[$i]['idproductos'].'",desc: "'.$prod[$i]['precio'].'",icon: "'.$prod[$i]['codigo'].'"}';
  5.         if($i<count($prod)){
  6.             $datos .= ",";
  7.         }
  8.         }
  9.         $coma = strrpos($datos,',');
  10.         $datos = substr_replace($datos, '', $coma,1);
  11.         $datos .= "];";
  12.         $this->Debug->log($datos);
  13.         echo $datos;

que me devuelve:
Cita:
[{value: "Malboro Box",label: "1",desc: "3.5",icon: "c01"},{value: "Malboro Comun",label: "2",desc: "4",icon: "c02"},{value: "Malboro 10",label: "3",desc: "3",icon: "c03"}];
y es la misma estructura del ejemplo :(
  #9 (permalink)  
Antiguo 04/11/2010, 19:36
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 18 años, 11 meses
Puntos: 839
Respuesta: problema con autocompletar

A excepción del punto y coma al final, creo que debería funcionar con esos datos.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #10 (permalink)  
Antiguo 05/11/2010, 12:58
Avatar de destor77  
Fecha de Ingreso: noviembre-2004
Ubicación: Gálvez, Santa Fe, Argentina
Mensajes: 2.654
Antigüedad: 19 años, 4 meses
Puntos: 43
Respuesta: problema con autocompletar

Bueno al final por fin lo pude lograr, el tema estaba en las " que van en los name, label, etc dejo el código por si alguien lo necesita:
funcion php:
Código PHP:
Ver original
  1. public function listado(){
  2.         $prod = $this->Productos->listadoProductos($_REQUEST);     
  3.            
  4.         $datos = "[";
  5.         for($i=0;$i<count($prod);$i++){
  6.         $datos .= '{"label": "'.$prod[$i]['nombre'].'","value": "'.$prod[$i]['idproductos'].'","desc": "'.$prod[$i]['precio'].'","icon": "'.$prod[$i]['codigo'].'"}';
  7.         if($i<count($prod)){
  8.             $datos .= ",";
  9.         }
  10.         }
  11.         $coma = strrpos($datos,',');
  12.         $datos = substr_replace($datos, '', $coma,1);
  13.         $datos .= "]";
  14.         echo $datos;
  15.        
  16.     }

javascript:
Código Javascript:
Ver original
  1. $("#producto").autocomplete({
  2.         source: 'index.php?controlador=index&accion=listado',
  3.         minLength: 1,
  4.         select: function( event, ui ) {    
  5.         $( "#producto" ).val( ui.item.label );
  6.         $( "#idproductos" ).val( ui.item.value );
  7.         $( "#precio" ).val( ui.item.desc );
  8.         $( "#codigo" ).val( ui.item.icon );
  9.        
  10.         return false;
  11.         }
  12.     });

muchas gracias por la ayuda!!!

Etiquetas: autocompletado
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 05:48.