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