Question

我正在尝试为页面上的文本框设置自动完成功能，但我无法让它工作。

我配置了捆绑包：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
            "~/Scripts/jquery-{version}.js", // version is 2.2.1
            "~/Scripts/jquery-ui-{version}.js" // version is 1.11.4
));

在控制器中，返回用户列表的函数。

public JsonResult GetInternalUsers() {
    var results = db.Users
        .Select(x => new {
            UserId = x.UserId,
            UserName = x.UserName,
        }
    ).ToList();

    return Json(results, JsonRequestBehavior.AllowGet);
}

动态添加编辑框，如下所示，XXX将替换为整数（即Attendees0）。

<input id="AttendeesXXX" type="text" name="Attendees[X]" class="form-control col-md-6" />

最后，实际的脚本：

$('#Attendees' + internalAttendees).autocomplete({
    source: function (request, response) {
        $.ajax({
            url: '@Url.Action("GetInternalUsers", "Events")',
            type: 'GET',
            async: false,
            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item.UserName, value: item.UserId }
                }))
            }
        });
    },
    select: function (event, ui) {
        $('#Attendees' + internalAttendees).val(ui.item.label);
        return false;
    },
    minLength: 1
});

最让我失望的部分是，当我输入$('#Attendees' + internalAttendees)时，intellisense永远不会显示autocomplete，所以我甚至不知道我是否包含了正确的库。

知道我做错了吗？

Answer 1

有几件事需要检查。

我所做的就是将我的选择器声明为变量

var $myElement = $('#myElement');

这样我就可以设置断点并检查$ myElement以查看它是否有值。

接下来，设置一个断点，并确保您实际上正在使用您的代码，因为这些元素是动态添加的。如果文档中的代码准备好在元素创建之前发生，则事件不会附加到元素。您可能必须添加元素，然后运行附加的代码。

实际调用看起来是正确的，如果你在控制器中设置一个断点，它会被击中吗？

但我很困惑。为什么这是自动完成？不想传递数据中的值＆＃34;数据＆＃34; ajax调用的参数？现在看来，你根本没有过滤你的回复。

Answer 2

对于MVC架构，您必须删除已嵌入的

@Scripts.Render("~/bundles/Jquery") 
@Scripts.Render("~/bundles/Jqueryval")

最后的所有.cshtml文件以及最后的views/Shared/_layout.cshtml文件，并将我们的jQuery合适的文件放在他的合适的.cshtmls文件中...让我们享受。戴上头......这些文件

<link href="~/Content/jquery-ui-1.10.4.custom.min.css" rel="stylesheet" type="text/css" /> 
<script src="~/Scripts/jquery-1.10.2.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.10.4.custom.min.js" type="text/javascript"></script>

//////////////////////code behind download  button//////////////////////

Response.ContentType = "Application/pdf";
Response.AppendHeader("Content-Disposition", "attachment; filename=help.pdf");
Response.TransmitFile(Server.MapPath("~/doc/help.pdf"));
Response.End();

MVC jQuery自动完成无法正常工作

2 个答案: