在ASP.NET MVC 3 aspplication视图中使用jQuery自动完成的文本框看起来并不像预期的那样

Question

输入字段的代码：

<input type="text" id = "selectedTenderName" name="selectedTenderName" />

在这里我添加了对js文件的引用：

<script src="../../Scripts/jquery-ui-1.8.14.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>

jQuery代码：

$(document).ready(function () {
   $("#selectedTenderName").autocomplete({ source: "/Reports/QuickSearch" });
});

行动准则：

public ActionResult QuickSearch(string term)
    var tenders = db.TENDERS
            .Where(t => t.NAMERU.ToLower().Contains(term.ToLower()))
            .Take(10)
            .OrderBy(t => t.NAMERU)
            .Select(t => new { label = t.NAMERU });
    return Json(tenders, JsonRequestBehavior.AllowGet);
}

第一张图片 - 我想要的视图。

我做的第二个观点。

问题在哪里，我该怎么办？

Answer 1

您是否在页面中包含了jQuery UI样式表参考？

Answer 2

如果将JQueryUI样式表添加到页面，则应该没问题。

这应该有效：

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.13/themes/smoothness/jquery-ui.css" />

如果你不知道，微软为.Net MVC提供的Javascript库提供免费的CDN。您可以在此处获取更多信息：

http://www.asp.net/ajaxlibrary/cdn.ashx

但简短版本是你应该能够添加：

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/themes/smoothness/jquery-ui.css" />
<script language="javascript" type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.14/jquery-ui.min.js"></script>

获得您想要的所有内容，并让Microsoft为您托管。

我们付了很多钱，很高兴能够获得一次免费的东西。