使用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僅僅是一個動態類型），最終會導致你頭疼的問題。海事組織你最好創建一個視圖模型，幷包括你的「教師類型」。