problema con autocompletar

[destor77]

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:

$("#producto").autocomplete({
        source: "index.php?controlador=index&accion=listado",
        minLength: 1,
        select: function(event, ui) {
        $('#precio').val(ui.item.precio);
        $('#idproductos').val(ui.item.idproductos);
        $('#producto').val(ui.item.nombre);
        }
    });
 

el html es:

Código HTML:

<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">
        <div class="portlet portlet-closable">
 
        <div class="portlet-header">
            <h4>Venta Actual</h4>
 
        </div> <!-- .portlet-header -->
 
        <div class="portlet-content">
 
            <div id="inline-form" style="width: 569px;">
 
            <div class="field">
                <div class="ui-widget">
                <label for="producto">Nombre Producto: </label>
                <input id="producto" name="producto" value=""/>
                <input id="precio" name="precio" type="hidden" value=""/>
                <input id="idproductos" name="idproductos" type="hidden" value=""/>
                <span><strong>Cantidad: </strong></span>
                <input id="cantidad" name="cantidad" size="4" type="text" class="xsmall" onchange="validarCantidad(this.value)" />
                <button type="submit"><span>Sumar</span></button>
                </div>
                
            </div>
            
            <div class="buttonrow">
                <input type="hidden" name="id_user" value="<?php echo $datos->id_user;?>"/>
                <button type="submit"><span>Cerrar Venta</span></button>
            </div>
 
            </div> <!-- #horizontal-form -->
            <div id="tabla">
            
            </div>
 
 
        </div> <!-- .portlet-content -->
 
        </div> <!-- .portlet -->
 
    </form>
 

y el php que me devuelve los datos es asi:

Código PHP:

public function listado(){
        $prod = $this->Productos->listadoProductos($_REQUEST);      
        
        for($i=0;$i<count($prod);$i++){
        $datos [$i]['nombre'] = $prod[$i]['nombre'];
        $datos [$i]['idproductos'] = $prod[$i]['idproductos'];
        $datos [$i]['precio'] = $prod[$i]['precio'];
        }
        
        echo json_encode($datos);
    }
 

que estoy haciendo mal?
desde ya muchas gracias

[David]

El problema es el formato del array que estás enviando. Debe ser solamente un array con los valores:

Código Javascript:

["c++", "javascript", "php"]
 

O, un array con objetos que tengan la propiedad label y value:

Código Javascript:

[{label: "c++", value: 1}, {label: "javascript", value: 2}, "php"]
 

[destor77]

Iniciado por David

El problema es el formato del array que estás enviando. Debe ser solamente un array con los valores:

Código Javascript:

["c++", "javascript", "php"]
 

O, un array con objetos que tengan la propiedad label y value:

Código Javascript:

[{label: "c++", value: 1}, {label: "javascript", value: 2}, "php"]
 

Hola david,
la funcion en php me devuelve asi el arreglo:

[{"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

[masterojitos]

Aver prueba asi:

Código Javascript:

var data = $.ajax({
    url: "index.php", 
    type: "GET", 
    data: "controlador=index&accion=listado"
}).responseText;
$("#producto").autocomplete(data, {
    formatItem: function(item){ 
        return item.nombre;
    }
}).result(function(event, item){
    $('#precio').val(item.precio);
    $('#idproductos').val(item.idproductos);
    $('#producto').val(item.nombre);
});
 

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

[destor77]

masterojitos:
probé como marcaste pero tampoco funciono, a parte en la consola de firebug me tira este error:

$("#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:

$(document).ready(
    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

[masterojitos]

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

[David]

Iniciado por destor77

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.

[destor77]

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:

var projects = [
            {
                value: "jquery",
                label: "jQuery",
                desc: "the write less, do more, JavaScript library",
                icon: "jquery_32x32.png"
            },
            {
                value: "jquery-ui",
                label: "jQuery UI",
                desc: "the official user interface library for jQuery",
                icon: "jqueryui_32x32.png"
            },
            {
                value: "sizzlejs",
                label: "Sizzle JS",
                desc: "a pure-JavaScript CSS selector engine",
                icon: "sizzlejs_32x32.png"
            }
        ];
 

y mi funcion php:

Código PHP:

$prod = $this->Productos->listadoProductos($_REQUEST);      
        $datos = "[";
        for($i=0;$i<count($prod);$i++){
        $datos .= '{value: "'.$prod[$i]['nombre'].'",label: "'.$prod[$i]['idproductos'].'",desc: "'.$prod[$i]['precio'].'",icon: "'.$prod[$i]['codigo'].'"}';
        if($i<count($prod)){
            $datos .= ",";
        }
        }
        $coma = strrpos($datos,',');
        $datos = substr_replace($datos, '', $coma,1);
        $datos .= "];";
        $this->Debug->log($datos);
        echo $datos;
 

que me devuelve:

[{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 :(

[David]

A excepción del punto y coma al final, creo que debería funcionar con esos datos.

[destor77]

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:

public function listado(){
        $prod = $this->Productos->listadoProductos($_REQUEST);      
            
        $datos = "[";
        for($i=0;$i<count($prod);$i++){
        $datos .= '{"label": "'.$prod[$i]['nombre'].'","value": "'.$prod[$i]['idproductos'].'","desc": "'.$prod[$i]['precio'].'","icon": "'.$prod[$i]['codigo'].'"}';
        if($i<count($prod)){
            $datos .= ",";
        }
        }
        $coma = strrpos($datos,',');
        $datos = substr_replace($datos, '', $coma,1);
        $datos .= "]";
        echo $datos;
        
    }
 

javascript:

Código Javascript:

$("#producto").autocomplete({
        source: 'index.php?controlador=index&accion=listado',
        minLength: 1,
        select: function( event, ui ) {     
        $( "#producto" ).val( ui.item.label );
        $( "#idproductos" ).val( ui.item.value );
        $( "#precio" ).val( ui.item.desc );
        $( "#codigo" ).val( ui.item.icon );
        
        return false;
        }
    });
 

muchas gracias por la ayuda!!!