jQuery AutoComplete不显示

在 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选项卡中

第三编辑：
我正在添加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 AutoComplete不显示

解决方法

相关推荐