jQuery Autocomplete Firing to Wrong URL

Question

I have a Jquery UI Autocomplete, defined like so:

    $('.postcode-lookup').autocomplete({
            source: function(request, response) {
                $.ajax({
                    url: '/autocomplete/suburbs',
                    dataType: 'json',
                    data: {
                        term: request.term
                    },
                    success: function(data) {
                        response(data);
                    }
                });
            },
            select: (event, result) => {
                event.preventDefault()
                //Extra functionality
            },
        })

Which works fine on one page in my app. On another page however it flat out does not work - instead of firing the Ajax request to /autocomplete/suburbs/ , it fires to ?query=....

There are 2 other autocompletes on the same page, but I can't see a way they'd be conflicting (if I dump .data('autocomplete').options.source, the right function is attached.

I have checked the version of jQuery UI and on both pages, it is the same. Though all other autcompletes on the page where this one is not working do not use source and select as properties, but use paramName, serviceUrl, onSelect. I can use these properties to get the correct request URL and results with my request, but it causes more errors because I think it expects the server data to be in an exact format and the autocomplete does not function.

I prefer the source, select format. Is there anything wrong I could be doing that is preventing it from working?