Question

I have 2 autocomplete text boxes on my form. What I want to do is dynamically change the source on the 2nd autocomplete textbox if a value has been selected from the first.

a snippet of my markup is below:

 $(function () {
    $("#SelectedAddress").autocomplete({
        source: "/CreateFIS/GetProperties",
        select: function(event, ui) {
            if (ui.item) {
                event.preventDefault();
                $('#SelectedAddress').val(ui.item.label);
                $('#SelectedAddressId').val(ui.item.value);
                getPropertyInformation(ui.item.value);
            }
        },
        focus: function(event, ui) {
            if (ui.item) {
                event.preventDefault();
                $('#SelectedAddress').val(ui.item.label);
                $('#SelectedAddressId').val(ui.item.value);
                //getPropertyInformation(ui.item.value);
            }
    }
    });
});

$(function () {
    $("#SelectedScheme").autocomplete({
        source: "/CreateFIS/GetSchemes",
        select: function (event, ui) {
            if (ui.item) {
                event.preventDefault();
                $('#SelectedScheme').val(ui.item.label);
                $('#SelectedSchemeId').val(ui.item.value);
            }
        },
        focus: function (event, ui) {
            if (ui.item) {
                event.preventDefault();
                $('#SelectedScheme').val(ui.item.label);
                $('#SelectedSchemeId').val(ui.item.value);
            }
        }
    });
});


<tr>
                    <td style="width:200px;"><label for="addresses">Please Select A Scheme</label> </td>
                    <td style="width:600px;">@Html.TextBoxFor(model => model.SelectedScheme, new { @class = "largeTextBox" })</td>
                    <td style="width:200px;"> @Html.ValidationMessageFor(model => model.SelectedSchemeId) </td>
                </tr>
                <tr>
                    <td style="width:200px;"><label for="addresses">Please Select A Property </label> </td>
                    <td style="width:600px;">@Html.TextBoxFor(model => model.SelectedAddress, new { @class = "largeTextBox" })</td>
                    <td style="width:200px;"> @Html.ValidationMessageFor(model => model.SelectedAddressId) </td>
                </tr>

WHat is the best way to acomplish this?

Answer 1

Use the option method to change the source:

var source = $(".selector").autocomplete("option", "source", "/New/Source");