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

Question

我正在尝试向 MVC5 项目中的输入字段添加自动完成功能。位于 Layout.cshtml 中的表单，我想对“学校”输入字段使用自动完成功能。据我了解，我已采取以下步骤： 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"));

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

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

5. 还有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);
   }
   

6. 最后，我将查询的 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的外部引用。

希望对你有帮助！！