jQuery自动完成功能不适用于ASP.NET MVC 5 [英] Jquery autocomplete not working on ASP.NET MVC 5

问题描述

• 我正在关注的教程

我正在使用本教程实现jquery自动完成功能 ASP.NET教程第76部分，在mvc中实现自动完成文本框功能 https://www.youtube.com/watch?v=MmBdMZJ3Jlo

Hi, I am implementing jquery autocomplete using this tutorial ASP.NET Tutorial Part 76 Implement autocomplete textbox functionality in mvc https://www.youtube.com/watch?v=MmBdMZJ3Jlo

• 问题

当我在输入框中键入内容时，自动完成功能不起作用

When I type something in input box, autocomplete does not work

• 说明

我已经实现了搜索功能及其正常工作，但是我被困在jquery的自动完成功能上.我在Google上搜索了很多内容，并堆积了以前的问题，我尝试了所有尝试，但无法解决我的问题.

I have implemented the search functionality and its working fine but i am stuck on autocomplete function of jquery. I have searched a lot on google and stack overflow previous questions, i tried everything but couldn't solve my problem.

• 代码

这是我的自动完成代码(我尚未包含搜索代码)

Here is my code of autocomplete ( i have not included code of searching )

Index.cshtml

<link href="~/Content/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="~/Content/jquery-ui.min.css" rel="stylesheet" type="text/css" />

<script src="~/Scripts/jquery-2.1.4.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui.min.js" type="text/javascript"></script>

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

</script>

 @using(@Html.BeginForm())
 {
        <br />
        <b>AirPort Code:</b>
        @Html.TextBox("SearchTerm", null, new { id="txtSearch"})
        <input type="submit" value="Search" />     
 }

和我的控制器代码

HomeController.cs

public JsonResult GetAirports(string term)
{
            traveloticketEntities db = new traveloticketEntities();
            List<String> Airports = new List<String>();
            Airports = db.IataAirportCodes.Where(x => x.code.StartsWith(term)).Select(y=>y.code).ToList();
            return Json(Airports, JsonRequestBehavior.AllowGet);

}

推荐答案

我找到了解决方案.非常感谢@mason的帮助.我在客户端控制台(使用F12的Google chrome控制台)上检查了代码，发现_Layout.cshtml在index.cshtml文件的末尾添加了其他jQuery库，这些库正在覆盖index.cshtml中的库.所以我从_Layout.css

I got the solution. Thanks a lot @mason for your help. I checked my code on client side console (google chrome console using F12) and there i found out that _Layout.cshtml were adding other jQuery libraries at the end of my index.cshtml file, which were overwriting my libraries in index.cshtml. So i removed this code from _Layout.css

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

并按以下顺序将我的jQuery库放在Index.cshtml中

and placed my jQuery libraries in Index.cshtml in the following order

<script src="~/Scripts/external/jquery/jquery.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.11.4.js" type="text/javascript"></script>
<script src="~/Scripts/myScript.js" type="text/javascript"></script>

这篇关于jQuery自动完成功能不适用于ASP.NET MVC 5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！