MVC3应用程序中的Jquery UI自动完成

时间:2012-08-30 22:23:50

标签: jquery asp.net-mvc asp.net-mvc-3 jquery-ui jquery-ui-autocomplete

您好我在控制器中有这段代码:

   ViewBag.localitate = db.Localitatis.OrderBy(p => p.Localitate).ToList();

在视图中我尝试通过:

<script type="text/javascript">
    $(function () {
        var availableTags = [
         @foreach (var item in ViewBag.localitate)
              {
                       @item.Localitate 
             }


    ];
        $("#destination").autocomplete({
            source: availableTags
        });
    });
</script>

我不知道如何格式化这个以获得像jquery演示示例中的数组:

"ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL",
        "ColdFusion",
        "Erlang",
        "Fortran",
        "Groovy",
        "Haskell",
        "Java",
        "JavaScript",
        "Lisp",
        "Perl",
        "PHP",
        "Python",
        "Ruby",
        "Scala",
        "Scheme"

为了使自动完成功能与我的数据库值

一起使用

谢谢

2 个答案:

答案 0 :(得分:2)

<script type="text/javascript">
    $(function () {
        $("#destination").autocomplete({
            source: @Html.Raw(Json.Encode(ViewBag.localitate))
        });
    });
</script>

如果您有大量数据,请考虑使用服务器端控制器操作来执行过滤。

答案 1 :(得分:0)

首先,将您的视图数据设置为只有您想要的实际名称:

ViewBag.localitate = db.Localitatis.Select(p => p.Localitate).OrderBy(p => p).ToList();

然后在javascript中呈现此内容的最简单方法是:

var availableTags = [" @String.Split("\,\"", ViewBag.localitate) "];

但我建议使用像JSON.NET这样的JSON解析器。这样您就不必担心跨站点脚本攻击等等,因为事情是为您转义的。

var availableTags = @(JsonConvert.Serialize(ViewBag.localitate));