使用jquery自动完成

Question

我下载了jquery自动完成的源文件以便在MVC3中使用。现在我有一个DropDownListFor与一个新的SelectList（ViewBag.teachertype）。

1问题：如何更改HTML代码下面我ViewBag ?:工作，他们给了我

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

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

     </div>  

实例功能刚刚硬编码的名字放于自动完成。我需要将我的名字从我的视图袋中取出。

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

Answer 1

您的“ViewBag”数据必须采用正确的格式才能使自动完成插件生效。下面是一个简单的例子，将“教师类型”的数组转换为JavaScript数组：

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(); 
} 

在相关的视图下面将创建与老师一起连入jQuery的自动完成插件的文本框类型控制器内设置：

@Html.TextBox("teachertype") 

<script type="text/javascript"> 

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

</script> 

在一个侧面说明，使用ViewData字典（ViewBag仅仅是一个动态类型），最终会导致你头疼的问题。海事组织你最好创建一个视图模型，并包括你的“教师类型”。