MVC 分部视图中的 JQuery UI 自动完成功能只能工作一次
JQuery ui autocomplete in a MVC partial view only works once
我一直在尝试使用 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);
}
}
所以,我的问题是,即使在部分视图更新一次之后,我如何才能完成这项工作?
你的问题是当你重新加载你的PartialView
你基本上删除了 html 文档中 DOM 的某些部分并创建一个新部分。您在事件中添加的所有绑定都将丢失$(document).ready()
。
解决此问题的可能解决方案之一是将自动完成的初始化代码以及.ready()
事件放在 jquery 中.ajaxSuccess()
全局事件,以便您通过 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打印功能使日历停止工作
- jQuery滚动功能只工作一次
- 为什么ng控制器不调用或工作或功能不工作
- 点击功能没有'ajax调用动态元素(Backbone)后无法工作
- AngularJs中的自动完成功能无法正常工作
- 为什么获胜'我的自定义功能工作
- 角度控制器功能赢得'不按指令工作
- 当我用鼠标左键点击时,让这个功能工作起来
- 重新启动游戏jQuery功能不工作
- 滚动功能不工作
- 角度控制器功能不;在指令内部调用时,似乎无法始终如一地工作
- JS不工作:Sublime 3编辑器-Var main=函数()-=不是“”;激活“;(功能新手)
- 单击水平滚动库中的图像以居中显示无法工作的功能
- MVC 分部视图中的 JQuery UI 自动完成功能只能工作一次
- 为什么本机浏览器排序功能的工作速度比快速排序慢
- 正在尝试获取此代码'在wordpress页面中工作的功能
- JavaScript:如何适应Firefox和/或Chrome的工作功能(IE)
- JQuery不工作.(功能)
- 无工作功能,具有ng-repeat
- 在角度方向don't控制器的工作功能