我正在使用带有 EF Code First 的 ASP.NET MVC3。我以前没有使用过 jQuery。我想将自动完成功能添加到绑定(bind)到我的模型的下拉列表中。下拉列表存储 ID,并显示值。
那么,如何连接 jQuery UI 自动完成小部件以在用户键入时显示值但存储 ID?
我也需要一个 View 中的多个自动完成下拉菜单。
我看到了这个插件:http://harvesthq.github.com/chosen/但我不确定我是否想为我的项目添加更多“东西”。有没有办法用 jQuery UI 做到这一点?
最佳答案
更新
我刚刚在 GitHub 的文本框中发布了一个示例项目,展示了 jQueryUI 自动完成功能
https://github.com/alfalfastrange/jQueryAutocompleteSample
我将它与常规 MVC TextBox 一起使用
@Html.TextBoxFor(model => model.MainBranch, new {id = "SearchField", @class = "ui-widget TextField_220" })
这是我的 Ajax 通话片段
它最初检查其内部缓存的正在搜索的项目,如果没有找到,它会触发对我的 Controller 操作的 Ajax 请求以检索匹配的记录
$("#SearchField").autocomplete({
source: function (request, response) {
var term = request.term;
if (term in entityCache) {
response(entityCache[term]);
return;
}
if (entitiesXhr != null) {
entitiesXhr.abort();
}
$.ajax({
url: actionUrl,
data: request,
type: "GET",
contentType: "application/json; charset=utf-8",
timeout: 10000,
dataType: "json",
success: function (data) {
entityCache[term] = term;
response($.map(data, function (item) {
return { label: item.SchoolName, value: item.EntityName, id: item.EntityID, code: item.EntityCode };
}));
}
});
},
minLength: 3,
select: function (event, result) {
var id = result.item.id;
var code = result.item.code;
getEntityXhr(id, code);
}
});
这不是所有代码,但您应该能够在这里看到缓存是如何搜索的,然后进行 Ajax 调用,然后对响应做了什么。我有一个
select
部分,以便我可以对选定的值做一些事情
关于asp.net-mvc-3 - 使用 mvc3 下拉列表的 jquery 自动完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10727538/