jQuery AutoComplete没有显示

Question

在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>

但是没有出现带有suggeestions的滑动窗口.如果我在响应函数内部发出警报,我可以看到正确的数据.

我错过了什么吗？

谢谢你的帮助

第一个编辑:此外,如何更改代码以使用返回列表中所选元素的"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

似乎自动完成插件在尝试将滑动建议的z-Index设置为其容器的1级时找不到元素.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>

Answer 1

我发现了这个问题.

在我的情况下,我也使用另一个插件,这个.

该插件包含在我的脚本末尾,并导致问题中描述的错误.我删除了插件,一切都很好.

在删除它之前,我还试图将问题放入静态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>

会导致我得到的错误.

我的选择是删除菜单插件,因为该代码不再受支持.

谢谢!

Answer 2

这个讨论真的很旧,但是在这里添加它以防它有助于某人......如果自动完成功能根本不起作用,因为下拉列表中没有显示,那么首先检查最简单的形式,如硬编码的建议,如下面.

$("#txtLanguage").autocomplete({ source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"] });

如果这不起作用那么它是链接jquery脚本的问题.在我的情况下,jquery.min.js是旧版本1.7.1,而所有其他脚本是1.8.18.

只需更换正确版本的脚本即可解决问题.

希望这可以帮助某人绊倒让自动完成工作的基本问题.