gpt4 book ai didi

javascript - MVC 局部 View 中的 JQuery ui 自动完成功能只能工作一次

转载 作者:行者123 更新时间:2023-11-29 10:13:07 25 4
gpt4 key购买 nike

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

问题是自动完成功能只在部分 View 更新之前有效。

这是我的部分观点

<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);
}
}

所以,我的问题是,即使局部 View 已更新一次,我如何才能使这项工作正常进行?

最佳答案

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

此问题的可能解决方案之一是在 jquery .ajaxSuccess() 中放置除 .ready() 事件之外的自动完成初始化代码 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 时初始化自动完成。

关于javascript - MVC 局部 View 中的 JQuery ui 自动完成功能只能工作一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28965600/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com