Javascript MVC局部视图中的JQuery ui自动完成只工作一次
我一直在尝试使用jqueryui让autocomplete为我的局部视图工作。局部视图是使用AJAX更新的 问题是,“自动完成”仅在局部视图更新之前有效 这是我的部分观点Javascript MVC局部视图中的JQuery ui自动完成只工作一次,javascript,jquery,ajax,asp.net-mvc,autocomplete,Javascript,Jquery,Ajax,Asp.net Mvc,Autocomplete,我一直在尝试使用jqueryui让autocomplete为我的局部视图工作。局部视图是使用AJAX更新的 问题是,“自动完成”仅在局部视图更新之前有效 这是我的部分观点 <div id="tagList"> @using (Ajax.BeginForm("AddToTagList", new { urlLocation = Model.UrlLocation }, new AjaxOptions { HttpMethod = "POST", InsertionMode = Inse
<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>
这是我的自动完成搜索操作
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);
}
}
public JsonResult SearchAutoComplete(字符串术语)
{
使用(IDocumentSession session=RavenDbConfig.RavenDBDocumentStore.OpenSession())
{
var results=session.Query().Where(x=>x.Text.StartsWith(term)).ToList();
返回Json(结果,JsonRequestBehavior.AllowGet);
}
}
因此,我的问题是,即使在局部视图更新一次之后,我如何才能使此工作正常?您的问题是,当您重新加载
PartialView
时,您基本上需要删除html文档中的DOM的某些部分并创建新的部分。并且您在$(document).ready()事件中添加的所有绑定都将丢失
这个问题的一个可能的解决方案是,除了在jquery.ajaxSuccess()
中放置.ready()
事件之外,还可以放置自动完成初始化代码,因为您可以通过Ajax重新加载部分视图。像这样:
$(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
时初始化自动完成
$(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 };
}));
}
});
},
});
});