Question

I have the following function which uses the old Bassistance autocomplete:

    $('#searchLocation').autocomplete("/Utils.aspx", {
        dataType: 'json',
        minChars: 2,
        selectFirst: false,
        parse: function (data) {
            var rows = new Array();
            for (var i = 0; i < data.length; i++) {
                rows[i] = { data:data[i], value:data[i], result:data[i] };
            }
            return rows;
        },
        formatItem: function (row, i, n) {
            return row;
        }
    });

The above just works i.e. the LI’s are generated for each result and a drop down list is produced directly below the input $(‘#searchLocation’).

I need to migrate to the new jQuery UI autocomplete, and I have the following so far:

$("#searchLocation").autocomplete({
        source: function( request, response ) {
            var area = $("#searchLocation").val();
            $.ajax({
                url: "/Utils.aspx",
                dataType: "json",
                data: {'q':area},
                success: function (data) {
                    console.log(data);
                    var rows = new Array();
                    for (var i = 0; i < data.length; i++) {
                        rows[i] = { data:data[i], value:data[i], result:data[i] };
                    }
                    return rows;
                }
            });
        },
        minLength: 2
    });

The data / JSON comes through as:

["CM23 ","CM23 1 ","CM23 2 ","CM23 3 ","CM23 4 ","CM23 5 "]

However, the UL is not being filled with the LI’s. There’s no error – it just doesn’t work.

What am I missing – do I need to write the code that creates the LI’s? I tried the following but it doesn’t work:

    .data( "autocomplete" )._renderItem = function( ul, item ) {
        return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + row + "</a>" )
        .appendTo( ul );
    }; 

Any help would be fantastic.

Answer 1

Since your remote method returns data in an array of strings, the following should work just fine (no post-processing necessary):

$("#searchLocation").autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "/Utils.aspx",
                dataType: "json",
                data: {'q':request.term},
                success: response
            });
        },
        minLength: 2
});

The key is calling the passed response function in your AJAX success method (since you don’t need any post-processing, you can use the response function as your AJAX success method directly).