jQuery UI - Autocomplete with extra params - returned data

Question

All,

I've moved on to using the ui autocomplete rather than the plugin, took me a while to figure out extra params based on an example I found here, but that part works.

I'm having problems with dealing with the return data. In the code below I can alert out the title being returned, but I get a drop down of 'UNDEFINED' in the browser.

Thanks in advance.

    $('#DocTitle').autocomplete({
    source: function(request, response) {
        $.ajax({
            url: "index.pl",
            dataType: "json",
            data: {
                Title: request.term,                        
                maxRows: 10
            },
            success: function(data) {
                response($.map(data, function(item) {
                alert(item.TITLE);
                return {
                    TITLE: item.TITLE

                }
            }))
            }
        })
    }
});

Answer 1

I am using jquery UI autocomplete as follows and it is working quite fine for me. You may try on the similar lines.

$('input[type=text][name=City]').autocomplete({
            source: function(request, response) {
                $.getJSON($('input#CitySuggestionsLink').val(), {
                    term: request.term,
                    stateId: $('select#StateName option:selected').attr('value')
                }, response);
            },
            search: function() {
                // custom minLength
                var term = this.value;
                if (term.length < 1) {
                    return false;
                }
            },
            delay: 200,
            focus: function() {
                // prevent value inserted on focus
                return false;
            },
            select: function(event, ui) {
                return false;
            }
        });