MVC 部分视图中的 JQuery ui 自动完成功能仅工作一次答案

【问题标题】：JQuery ui autocomplete in a MVC partial view only works onceMVC 部分视图中的 JQuery ui 自动完成功能仅工作一次
【发布时间】：2015-05-12 00:02:48
【问题描述】：

我一直在尝试使用 JQuery ui 让自动完成功能适用于我的部分视图。部分视图使用 AJAX 更新。

问题在于自动完成功能只能在局部视图更新之前起作用。

这是我的部分观点

<div id="tagList">
@using (Ajax.BeginForm("AddToTagList", new { urlLocation = Model.UrlLocation }, new AjaxOptions { HttpMethod = "POST", InsertionMode = InsertionMode.Replace, UpdateTargetId = "tagList" }))
{
    if (Model.TagList != null)
    {

        <div class="form-group">
            @Html.LabelFor(model => model.Tag.Text, "Tags", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-xs-10">
                <div class="input-group" style="max-width: 300px;">
                    @Html.EditorFor(model => model.Tag.Text, new { htmlAttributes = new { @class = "form-control", @id = "search_term" } })
                    @Html.ValidationMessageFor(model => model.Tag.Text, "", new { @class = "text-danger" })
                    <div class="input-group-btn">
                        <button type="submit" value="Add Tag" class="btn btn-default">+</button>
                    </div>

                </div>
            </div>
        </div>
    }
}
</div>

这是我的 JavaScript

$(document).ready(function () {
$("#search_term").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Tag/SearchAutoComplete",
            type: "POST",
            dataType: "json",
            data: { term: request.term },
            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item.Text, value: item.Text };
                }));

            }
        });
    },
  });
});

这是我的自动完成搜索操作

        public JsonResult SearchAutoComplete(string term)
    {
        using (IDocumentSession session = RavenDbConfig.RavenDBDocumentStore.OpenSession())
        {
            var results = session.Query<Tag>().Where(x => x.Text.StartsWith(term)).ToList();
            return Json(results,JsonRequestBehavior.AllowGet);
        }
    }

所以，我的问题是，即使在局部视图更新过一次之后，我如何才能使这项工作？

【问题讨论】：

标签： javascript jquery ajax asp.net-mvc autocomplete

【解决方案1】：

您的问题是，当您重新加载 PartialView 时，您基本上会删除 html 文档中 DOM 的某些部分并创建新的。您在$(document).ready() 事件中添加的所有绑定都将丢失。

解决此问题的一个可能的解决方案是将您的自动完成初始化代码和 .ready() 事件放在 jquery .ajaxSuccess() global event 中，因为您通过 Ajax 重新加载您的 PartialViews。像这样：

$(document).ajaxSuccess(function() {
  $("#search_term").autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Tag/SearchAutoComplete",
            type: "POST",
            dataType: "json",
            data: { term: request.term },
            success: function (data) {
                response($.map(data, function (item) {
                    return { label: item.Text, value: item.Text };
                }));

            }
        });
    },
  });
});

这样，您将在每次重新加载 PartialView 时启动自动完成功能。

【讨论】：