Cannot get selected item in jquery autocomplete

Question

Using Jquery autocomplete UI widget, I have the following code that gets a list of suburbs/postcodes via external php:

    <script>

    $(function() {
        $("#suburb").autocomplete({

            minLength:3, //minimum length of characters for type ahead to begin
            source: function (request, response) {
                $.ajax({
                    type: 'POST',
                    url: 'resources/php/helpers.php', //your server side script
                    dataType: 'json',
                    data: {
                        suburb: request.term
                    },

                    success: function (data) {
                        //if multiple results are returned
                        if(data.localities.locality instanceof Array)
                            response ($.map(data.localities.locality, function (item) {
                                return {
                                    label: item.location + ', ' + item.postcode,
                                    value: item.location + ', ' + item.postcode
                                }
                            }));
                        //if a single result is returned
                        else
                            response ($.map(data.localities, function (item) {
                                return {
                                    label: item.location + ', ' + item.postcode,
                                    value: item.location + ', ' + item.postcode
                                }
                            }));
                    },

                    select: function (event, ui) {
                        alert("SELECT");
                        $('#postCode').val("POSTCODE");
                        return true;
                    }
                });
            }

        });
    });
</script>

The autocomplete itself works well, I get the list of matches , however the 'select' part does not work, ie, I need to set another input text value to the value selected, but even in the above code, the Alert dialog does not get called - the various syntax I've seen has kind of confused me, so I'm not sure what I've done wrong here.

Answer 1

The selectfunction should be outside of the object that is sent to the ajax method.

Try this:

$(function() {
    $("#suburb").autocomplete({

        minLength:3, //minimum length of characters for type ahead to begin
        source: function (request, response) {
            $.ajax({
                type: 'POST',
                url: 'resources/php/helpers.php', //your server side script
                dataType: 'json',
                data: {
                    suburb: request.term
                },

                success: function (data) {
                    //if multiple results are returned
                    if(data.localities.locality instanceof Array)
                        response ($.map(data.localities.locality, function (item) {
                            return {
                                label: item.location + ', ' + item.postcode,
                                value: item.location + ', ' + item.postcode
                            }
                        }));
                    //if a single result is returned
                    else
                        response ($.map(data.localities, function (item) {
                            return {
                                label: item.location + ', ' + item.postcode,
                                value: item.location + ', ' + item.postcode
                            }
                        }));
                }
            });
        }, 

        select: function (event, ui) {
            alert("SELECT");
            $('#postCode').val("POSTCODE");
            return true;
        }            

    });
});