在
jquery对话框中,我想使用jqueryUI的jquery自动完成功能.
然后我在我的Controller中编写了一个动作(我正在使用ASP.NET MVC2),如下所示
public ActionResult GetForos(string startsWith,int pageSize)
{
// get records from underlying store
int totalCount = 0;
string whereClause = "Foro Like '" + startsWith + "%'";
List<Foro> allForos = _svc.GetPaged(whereClause,"Foro",pageSize,out totalCount);
//transform records in form of Json data
List<ForoModelWS> foros = new List<ForoModelWS>();
foreach ( Foro f in allForos)
foros.Add( new ForoModelWS() { id= Convert.ToString(f.ForoId),text= f.Foro + ",Sezione: " + f.Sezione + "," + f.AuthorityIdSource.Name });
return Json(foros);
}
类ForoModelWS是一个简单的类,仅用于保存要在json中传输的数据.这里是
public class ForoModelWS
{
public string id;
public string text;
}
在客户端我有以下jquery代码：
<input id="theForo" />
<script type="text/javascript">
$(document).ready(function() {
$("#theForo").autocomplete({
source: function(request,response) {
$.ajax({
type: "post",url: "/Foro/GetForos",dataType: "json",data: {
startsWith: request.term,pageSize: 15
},success: function(data) {
response($.map(data,function(item) {
return {
label: item.text,value: item.text
}
}))
}
})
},minLength: 2,select: function(event,ui) {
},open: function() {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},close: function() {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
});
</script>
但是没有出现具有建议的滑动窗口.如果我在响应函数内部发出警报,我可以看到正确的数据.
我想念某件事吗？
感谢帮忙
第一编辑：
此外,如何更改代码以使用返回列表中所选元素的“id”属性？
第二编辑：
我已经使用Chrome开发者工具查看了更多信息,并且我看到当自动完成启动时出现一些错误.下列：
Uncaught TypeError: Cannot call method 'zIndex' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:317 Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:321 Uncaught TypeError: Cannot read property 'element' of undefined @ _assets/js/jquery-ui-1.8.4.custom.min.js:320
似乎自动完成插件在尝试将滑动建议1的z-Index设置为其容器时,找不到元素. jquery UI对话框打开时出现第一个错误.自动完成的输入位于jquery对话框内部的jquery选项卡中
<td width="40%"> <%= Html.LabelFor(model => model.ForoID)%> <br /> <%= Html.HiddenFor(model => model.ForoID) %> <input id="theForo" /> <%= Html.ValidationMessageFor(model => model.ForoID,"*")%> </td>
解决方法
我发现了这个问题.
该插件被包含在我的脚本的末尾,并导致问题中描述的错误.我已经删除了插件,一切工作都很好.
在删除之前,我也尝试隔离这两个脚本放在静态HTML中的问题.我经历过,即使是最简单的自动完成功能的使用,像这样
<script type="text/javascript">
$(document).ready(function() {
var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran","Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP","Python","Ruby","Scala","Scheme"];
$("#theForo").autocomplete({
source: availableTags
});
});
</script>
会导致我的错误.
谢谢！
