AutoComplete not working on the Search Box using Jquery

Question

I am trying get get TypeAhead functionality on a search textbox. I have 2 radio buttons on the form if one of them is selected I need the type-ahead functionality to add the ist of masters to the search box.

 //html
 <li> @Html.TextBox("SearchTitle") </li>

 //JavaScript
 if ($('input[name=SearchType]:checked').val() == "m") {
        var availableMasters = ["ActionScript",
                                "AppleScript",
                                "Asp"];
        $.ajax({
            cache: false,
            type: "GET",
            url: "@(Url.Action("Get", "Masters"))",
            success: function (data) {
                availableMasters = data.list;
            },
        error: function () {
            alert('No Master Available.');
        }
    });

        $("#SearchTitle").autocomplete({
            source: availableMasters
        });
    }

My issue is that the form is binding the availableMasters before the ajax call, so the search textbox always has the static text array that I am adding at the begining with 3 fields. I am getting the correct list of masters in the (data.list) but it never shows up in the textbox.

Is there a way to bind the list once the ajax call get the list of masters? Thanks for the concerns...

Answer 1

wrap it in a function, say init, and call that function on the success of your ajax call.

function initSearch(){
     $("#SearchTitle").autocomplete({
         source: availableMasters
     });
}

if ($('input[name=SearchType]:checked').val() == "m") {
        var availableMasters = ["ActionScript",
                                "AppleScript",
                                "Asp"];
        $.ajax({
            cache: false,
            type: "GET",
            url: "@(Url.Action("Get", "Masters"))",
            success: function (data) {
                availableMasters = data.list;
                initSearch();
            },
        error: function () {
            alert('No Master Available.');
        }
    });
}