Using jQuery UI Autocomplete widget with label/value in JSON but not showing the results

I'm using the autcomplete widget to fill a client id in a form. It will show the label, the client name, but needs to pass the id. I'm using json and this javascript code to process:

    $("input#clientid").autocomplete({
        source: function(request, response) {
            $("#ajax-loader").fadeIn('normal');

            $.ajax({
                url: BASE_URL + 'projects/ajax/get_clients',
                data: request,
                dataType: "json",
                type: "POST",
                success: function(data) {
                    response(data);
                }
            });

            $("#ajax-loader").fadeOut("normal");
        },
        minLength: 2
    });

In my PHP controller I'm printing directly some results with开发者_如何学Go JSON, firebug shows me like that:

[{"label":"Client example","value":1},{"label":"Lorem Ipsum","value":2},{"label":"Microsoft","value":3}]

But the autocomplete is not showed and no error in console. When I say not showed I'm saying that there is no "div" outside the <input /> to select a value. Sorry don't know how to express it well.

If I try a basic example from the website with no remote it's showed. I don't know what I'm doing bad.

Thank you in advance!

 $.ajax({
                url: BASE_URL + 'projects/ajax/get_clients',
                data: request,
                dataType: "json",
                type: "POST", <--- //
                success: function(data) {
                    response(data);
                }
            });

you are setting the request type the wrong way... thats why its setting the default ajax reaquest type that is GET

Update:

is it possible for you to complete the ajax request before you use the autocomplete with you input field? something like

$.ajax({
                url: BASE_URL + 'projects/ajax/get_clients',
                data: request,
                dataType: "json",
                type: "POST",
                success: function(data) {
                    xhrResponse(data);
                }
            });


function xhrResponse(data){

$("#clientid").autocomplete({
        source: function(data, response) {
            $("#ajax-loader").fadeIn('normal');

           response($.map( data, function( item ) {
                        return {
                            label: item.label,
                            value: item.value
                        }
                    }));


            $("#ajax-loader").fadeOut("normal");
        },
        minLength: 2
    });

}