Question

我试图在MVC5项目中将自动完成添加到输入字段。表单位于Layout.cshtml中，我想使用自动完成功能来实现＆＃34; School＆＃34;输入字段。据我了解，我已经做了以下步骤： 1.我通过NuGet包管理器安装了jQuery UI小部件。 2.在layout.cshtml的底部，我添加了：

@Scripts.Render("~/bundles/jqueryui") 
@Scripts.Render("~/bundles/jquery")`

3。在bundleConfig.cshtml中，我添加了：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));

还有：

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",             
"~/Content/themes/base/jquery.ui.autocomplete.css",             
"~/Content/themes/base/jquery.ui.theme.css"));

然后，我编写了以下jQuery函数：

<script type="text/javascript">
$(function () {
    $("#search").autocomplete({
        source: '@Url.Action("GetSchool")'
    });
});
</script>

HomeController中的GetSchool函数：

public JsonResult GetSchool(string term)
{
    ReviewDBContext db = new ReviewDBContext();
    List<string> schoolsList;
    schoolsList = db.Schools.Where(x => x.Name.StartsWith(term)).Select(y => y.Name).ToList();
    return Json(schoolsList, JsonRequestBehavior.AllowGet);
}

最后，我将查询的ID添加到layout.cshtml页面：

<li class="searchLi"> <input type="text" class="form-control" id="search" autocomplete="on"> </li>

当我运行项目时，我收到了这个错误：

JavaScript runtime error: '$' is undefined

据我了解，要修复此错误，我需要添加对jQuery库的引用，所以在标记中我添加了以下链接：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

然后，我得到了这个错误：

 Unhandled exception at line 18, column 13 in http://localhost:*****
 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'autocomplete'

但是自动完成功能来自我之前安装的jQuery UI包。

注1：我在Internet Explorer中遇到错误。在chrome中没有错误，但自动完成功能不起作用，所以我认为这两个浏览器都存在问题。注意2：我尝试使用本教程http://blog.falafel.com/three-steps-use-jquery-ui-asp-net-mvc-5/

也许有人知道是谁解决了这个问题？谢谢！

Answer 1

看来你有重复的jQuery库引用。根据您的代码，您的视图已包含

的jQuery引用

@Scripts.Render("~/bundles/jquery")

并在错误之后再次添加了jQuery的外部链接。我认为这个错误来自其他原因。

我认为原因是jQuery和jQueryUI的@Scripts.Render顺序不正确。 jQuery必须高于jQueryUI。所以试试吧。

替换如下：

@Scripts.Render("~/bundles/jqueryui") 
@Scripts.Render("~/bundles/jquery")

使用：

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

并删除jQuery的外部引用。

希望这会有所帮助!!

asp.net MVC5中的自动完成输入字段

1 个答案: