@Url.Action in separate javascript file

Question

I had some javascript for an autocomplete in the html of a page, which worked ok, I the moved the script into a separate js file and it broke my code. After some google searches i found the reason.

I have been trying to change my code following on from a few post i have read here on Stackoverflow and other sites, but I just cannot seem to get the code to work.

Hopefully some professional programmers can help fix my problem.

<input id="weatherSearch" data-request-url="@Url.Action("WeatherAutoComplete", "Weather")" name="q" title="Change location" type="text"/>

//****************************************

// Javascript code

//****************************************

function monkeyPatchAutocomplete() {
    var oldFn = $.ui.autocomplete.prototype._renderItem;
    $.ui.autocomplete.prototype._renderItem = function (ul, item) {
        var re = new RegExp("^" + this.term, "i");
        var t = item.label.replace(re, "<span style='color:black;font-size:11px;background-color:inherit;font-weight:bold;'>" + this.term + "</span>");
        return $("<li></li>")
            .data("item.autocomplete", item)
            .append("<a>" + t + "</a>")
            .appendTo(ul);
    };
}



$(function () {
    monkeyPatchAutocomplete();
    $('#weatherSearch').autocomplete({
        source: function (request, response) {
            var re = $.ui.autocomplete.escapeRegex(request.term);
            var matcher = new RegExp("^" + re, "i");
            $.ajax({
                url: $(this).data('request-url'),
                type: "Get",
                dataType: "json",
                delay: 300,
                minLength: 1,
                data: { searchText: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return { label: item.Location, value: item.Location }
                    }))
                }
            })
        }
    });
});

Thanks

George