Jqueryオートコンプリートの使用

Question

MVC3で使用するjqueryオートコンプリートのソースファイルをダウンロードしました。今私は、新しいSelectList（ViewBag.teachertype）を持つDropDownListForを持っています。

第一の質問：彼らは私を与えたどのように私は私のViewBagで作業するには、以下のHTMLコードを変更することができます？：

 @*@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は、単に動的な型である）、最終的にあなたの頭痛の原因となります。 IMOでは、ビューモデルを作成し、 "教師の種類"を含める方が良いでしょう。