如何在旧版jQuery UI中使jQuery UI自动完成功能正常工作？

Question

I'm trying to add an autocomplete widget to my webpage, a personalized one. After having several problems with my own configuration, I decided to try the official example directly in my webpage, doing everything I read there, and replacing this

.autocomplete( "instance" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append( "<div>" + item.label + "<br>" + item.desc + "</div>" )
    .appendTo( ul );
};

with this

.data("uiAutocomplete")._renderItem = function (ul, item) {
    return $("<li>")
    .append("<div>" + item.label + "<br>" + item.desc + "</div>")
    .appendTo(ul);
};

because I'm using jQuery UI 1.10.4 and I can't update it (my boss doesn't want me to do that). I couldn't make the example work, and I know that if I make it work, I won't have problems to adapt it to what it has to do.

Please, do you know how to make it work? Thanks in advance.

Answer 1

Ok, finally I gave up. The way I overcome the situation was adapting the DTO I was transforming to JSON and sending to the browser to the format that Autocomplete expects. The format has three fields:

{
    id: ...,
    label: ...,
    value: ...
}

After that, I just configured the autocomplete in this way:

$("#<%= nuevoPadrePem.ClientID %>").autocomplete({
    minLength: 6,
    source: function (request, response) {
        var term = request.term;
        var result = [];

        $.ajax({
            url: 'PMENUEVAVERS.aspx/GetResultadosBusqueda',
            data: JSON.stringify({ texto: term }),
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (dtos) {
                response(dtos.d);
            }
        });
    },
    select: function (event, ui) {
        var dto = ui.item;
        $("#<%= hdSelectedNuevoPadrePem.ClientID %>").val(dto.id);
        $("#<%= nuevoPadrePem.ClientID %>").css('color', '#00BE00');
    }
})

And it worked without problems.