jQuery Unobtrusive Autocomplete 未被调用答案

【问题标题】：jQuery Unobtrusive Autocomplete not being calledjQuery Unobtrusive Autocomplete 未被调用
【发布时间】：2015-10-22 10:26:07
【问题描述】：

在我正在构建的应用程序的销售/帐户页面上似乎没有调用 here 描述的不显眼的自动完成功能。我遵循了本网站和其他地方的建议，将自动完成代码引用到一个 ActionResult，该 ActionResult 返回一个 Json 对象，其中填充了自动完成的值，但由于页面的其余部分有效，该代码似乎甚至没有被调用。存储过程也独立成功。我只是在学习 jQuery，所以有人能发现这里缺少什么吗？

视图的受影响部分：

@model MyProject.Models.AccountsSearchModel

@{
ViewBag.Title = "Accounts";
Layout = "~/Views/Shared/_Layout.cshtml";
}
@using (Html.BeginForm("Accounts", "Sales", FormMethod.Post, new {id = "accountsForm", autocomplete = "on", data_parsley_validate = "data-parsley-validate"}))
{
    @Html.AntiForgeryToken()
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group">
                @Html.LabelFor(model => model.AccountName, "Account Name")
                @Html.TextBoxFor(model => model.AccountName, new { data_autocomplete_url = Url.Action("AutocompleteAccount") })
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group">
                @Html.LabelFor(model => model.OwnerName, "Account Owner Name", new { @class = "control-label" })
                @Html.TextBoxFor(model => model.OwnerName, new { data_autocomplete_url = Url.Action("AutocompleteOwner") })
            </div>
        </div>
    </div>
}

@section Scripts{

<script type="text/javascript" language="javascript">
    $(document).ready(function () {
        $('*[data-autocomplete-url]')
            .each(function () {
                $(this).autocomplete({
                    source: $(this).data("autocomplete-url")
                });
            });
    });
</script>

<!-- page specific plugins -->
<!-- datatables -->
<script src="/Content/lib/DataTables/media/js/jquery.dataTables.min.js"></script>
<script src="/Content/lib/DataTables/media/js/dataTables.bootstrap.js"></script>
<script src="/Content/lib/DataTables/extensions/TableTools/js/dataTables.tableTools.min.js"></script>
<script src="/Content/lib/DataTables/extensions/Scroller/js/dataTables.scroller.min.js"></script>

<!-- datatables functions -->
<script src="/Content/js/apps/tisa_datatables.js"></script>
}

控制器返回“AccountName”Json 自动完成对象：

public ActionResult AutocompleteAccount(string term)
    {
        MyProjectEntities myProjectdb = new MyProjectEntities();

        var items = myProjectdb.uspGetAccountNames();

        var filteredItems = items.Where(
            item => item.IndexOf(term, StringComparison.InvariantCultureIgnoreCase) >= 0);

        return Json(filteredItems, JsonRequestBehavior.AllowGet);
    }

非常感谢您的任何帮助。

【问题讨论】：

您是否在浏览器控制台中遇到任何错误？
不，没有出现错误，程序永远不会到达返回 Json 对象的 Action Result 内的断点。好像自动完成代码是正确的但被跳过了。顺便说一句，感谢您的关注。
你调试过脚本吗？.each()函数正在执行吗？
在浏览器中调试会产生“未捕获的 ReferenceError：数据未定义（匿名函数）@ Accounts:455”和“未捕获的 TypeError：$(...).autocomplete 不是函数（匿名函数) @Accounts:450n.extend.each @jquery.min.js:2n.fn.n.each @jquery.min.js:2(匿名函数) @Accounts:449n.Callbacks.j @jquery.min.js: 2n.Callbacks.k.fireWith @ jquery.min.js:2n.extend.ready @ jquery.min.js:2K @ jquery.min.js:2" 在 Chrome 控制台中。 Chrome Sources 说“未捕获的类型错误：$(...)autocomplete 不是一个函数。”我是 UI 新手 - 知道它们是什么以及如何解决它们吗？
为什么之前说浏览器控制台没有错误？在 cmets 中阅读起来太难了（您应该更新您的问题），但首先似乎您甚至没有包括 jquery-{version}.js 和/或 jquery-ui-{version}.js（或者可能已经复制了它们或它们的顺序错误）

标签： jquery json asp.net-mvc jquery-ui autocomplete

【解决方案1】：

对于像我一样开始使用 UI 的人来说，以下是解决此问题的方法：

1) AutoComplete 是一个独立于默认 jQuery 库的 jQuery UI 库的功能。如果项目中还没有以下文件，请从 jQuery 站点 (Example) 下载 UI。

2) 将 jQuery UI 添加到项目后，确保将“jquery-[version].js”和“jquery-ui-[version].js”添加到或包含在项目的 Scripts 文件夹中。

3) 在自动完成代码之前的页面脚本部分中引用这些文件。例如：

<script src="~/Scripts/jquery-[version].js"></script>
<script src="/Scripts/jquery-ui-[verson].js"></script>

4) 此时，如果控制器代码正确，自动完成应该可以工作，但自动更正结果可能是透明的。要使它们不透明，请将“全部”CSS 样式表添加到 _Layout 页面（如果有）或页面本身的 head 标签之间。有关这方面的更多帮助，谷歌“mvc autocomplete transparent”并转到第一个和第四个（在撰写本文时）链接，标题为“jquery UI controls are transparent | The ASP.NET Forums”和“Bootstrap 3 MVC 5 jQuery- ui 自动完成 - 堆栈溢出”。我会发布它们，但我是新手，目前每个帖子的链接有限。

【讨论】：