0

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.

1 Answer 1

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;
        }            

    });
});
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.