ASP.NET MVC 3 應用程序視圖中 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" />

如果您不知道，Microsoft 為 Javascript 庫提供了免費的 CDN，它們包含在 .Net MVC 中。 您可以在此處獲取更多信息：

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 為您托管。

我們已經付給他們很多錢了，很高興這次能免費得到一些東西。