在 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", 0, 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 选项卡内
第三次编辑: 我正在添加 HTML 标记以使其完整
<td width="40%">
<%= Html.LabelFor(model => model.ForoID)%>
<br />
<%= Html.HiddenFor(model => model.ForoID) %>
<input id="theForo" />
<%= Html.ValidationMessageFor(model => model.ForoID, "*")%>
</td>
最佳答案
我已经发现问题了。
就我而言,我还使用了另一个插件,this one .
该插件包含在我的脚本末尾,并导致了问题中描述的错误。我已经删除了该插件,一切都工作得很好。
在删除它之前,我还尝试将两个脚本放入静态 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>
会导致我得到的错误。
我的选择是删除菜单插件,即使该代码不再受支持。
谢谢!
关于jQuery 自动完成不显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3710835/