jQuery Autocomplete不会出现

Question

在jQuery对话框中，我想使用jQueryui的jQuery自动完成功能。

然后，我已经在控制器（我正在使用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 Developer Tool进行了更多检查，我已经看到，当自动完成启动时出现一些错误。以下：

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索引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。

只需替换正确的脚本版本就解决了问题。

希望这有助于一个遇到自动完成工作的基本问题的人。

Answer 3

就像我回答 这里, ，以我的JQuery UI自动完成示例进行抢劫。注意 source 部分。希望能帮助到你：

    var cache = {};
    $("#textbox").autocomplete({
      source: function(request, response) {
       if (request.term in cache) {
        response($.map(cache[request.term].d, function(item) {
         return { value: item.value, id: item.id }
        }))
        return;
       }
       $.ajax({
        url: "/Services/AutoCompleteService.asmx/GetEmployees",  /* I use a web service */
        data: "{ 'term': '" + request.term + "' }",
        dataType: "json",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        dataFilter: function(data) { return data; },
        success: function(data) {
         cache[request.term] = data;
         response($.map(data.d, function(item) {
          return {
           value: item.value,
           id: item.id
          }
         }))
        },
        error: HandleAjaxError  // custom method
       });
      },
      minLength: 3,
      select: function(event, ui) {
       if (ui.item) {
        formatAutoComplete(ui.item);   // custom method
       }
      }
     });

如果您现在不这样做，请 火焰. 。这是网络开发的宝贵工具。您可以在此JavaScript上设置一个断点，看看会发生什么。

Answer 4

使用函数菜单（）的fgmenu并使用该函数自动完成

功能名称是同样的问题

您可以在fgmenu.js中更改函数名称

  $('#hierarchybreadcrumb6').menuA({content: $('#hierarchybreadcrumb6').next().html(),backLink: false});

Answer 5

根据洛伦佐的答案，我修改了

$.fn.fgmenu = function(options) { ... 

到

$.fn.fgmenu = function(options) { ...    

来自此插件 菜单 而且效果很好（自动完成和菜单插件）