Question

I downloaded the source files for jquery autocomplete to use in MVC3. Right now I have a DropDownListFor with a new SelectList(ViewBag.teachertype).

1st question: How can I change html code below to work with my ViewBag?:

      @*@Html.DropDownListFor(model => model.Teacher, new  SelectList(ViewBag.teachertype), new { style = "width:350px;" })*@

       <div class="ui-widget">
        <input id="tags" type="text"  />

        </div>    

Example function they gave me has just hard coded the names to put in the autocomplete. I need to bring my names in from my viewbag though.

   <script type="text/javascript">
     $(function () {
    var availableTags = [ "kelly", "joe", "tony", "Billy"];
    $("#tags").autocomplete({
        source: availableTags
    });
});
</script>

Answer 1

Your “ViewBag” data must be in the correct format for the auto complete plugin to work. Here is a quick example that will convert an array of “teacher types” to a javascript array:

public ActionResult Index()
{
    var types = new string[] {"Kindergarten", "HighSchool", "preschool" };
    var serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
    ViewBag.teachertype = serializer.Serialize(types);
    return View();
}

Within the related view the following will create a textbox that is wired up to the jquery autocomplete plugin along with the teacher types set within the controller:

@Html.TextBox("teachertype")

<script type="text/javascript">

    $(function() {
        var types = @Html.Raw(ViewBag.teachertype);
        $("#teachertype").autocomplete({
            source: types 
        });
    });

</script>

On a side note, utilizing the ViewData dictionary (ViewBag is simply a dynamic type) will eventually cause you headaches. IMO you would be better off to create a view model and include your “teacher types”.