Question

在我正在构建的应用程序的“销售/帐户”页面上似乎没有调用描述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);
    }

非常感谢您的任何帮助。

Answer 1

对于那些刚开始使用UI的人来说，这就解决了这个问题：

1）AutoComplete是jQuery UI库的一个功能，它与默认的jQuery库是分开的。如果下面的文件不在项目中，请从jQuery站点（Example）下载UI。

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

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

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

4）此时，如果Controller代码正确，则自动完成应该有效，但自动更正结果可能是透明的。要使它们不透明，请将“all”CSS样式表添加到_Layout页面（如果有）或头部标记之间的页面本身。有关此问题的其他帮助，Google“mvc autocomplete transparent”并转到第一个和第四个（截至撰写本文时）链接，标题为“jquery UI控件透明| ASP.NET论坛”和“Bootstrap 3 MVC 5 jQuery- ui自动完成 - 堆栈溢出“。我会发布它们，但我是新的，目前每个帖子的链接都有限。

jQuery Unobtrusive Autocomplete未被调用

1 个答案: