logo标签列表

jQuery Autocomplete .data("autocomplete") 未定义

jqueryautocompleteundefinedjquery-autocomplete
34

当我尝试使用下面的代码实现自动完成时，出现了一个错误：

.data("autocomplete") is undefined

如果我从最后删除 .data() 方法，它就能正常工作（只是没有 .data() 提供的可定制图形）。有人能告诉我出了什么问题吗？

$("input#testInput").bind("autocompleteselect", function (event, ui) {

  }).autocomplete({
      appendTo: "#autoCompList",
      source: function (request, response) {
          $.ajax({

              url: JSONP CALL URL
              dataType: "jsonp",
              data: {
                  featureClass: "P",
                  style: "full",
                  maxRows: 12,
                  name_startsWith: request.term
              },
              success: function (data) {
                  response($.map(data.data, function (item) {
                      fbPageJson = item;
                          return {
                              label: item.name,
                              image: item.picture,
                              json: item,
                          }
                  }));
              },
          });
      }

  }).data("autocomplete")._renderItem = function (ul, item) {
      return $("<li></li>").data("item.autocomplete", item).append("<a><img src='" + item.image + "' alt='no photo'/></a>" + item.label).appendTo(ul);
  };
6个回答
61

我曾经遇到过同样的问题，基于jquery ui 1.10.0版本，我认为你应该尝试。

data('uiAutocomplete')
代替
data('autocomplete')

根据Johnny的评论，我查看了.data()函数的工作方式。是的，当选择器没有找到任何项时，jQuery从.data()调用中返回null。

因此，如果您的选择器没有匹配的元素，则不会创建自动完成对象并将其添加到自定义数据对象中。

因此，最好这样做：

    $(selector).autocomplete({ your autocomplete config props here });
    if ( $(selector).data() ) {

    // some jQueryUI versions may use different keys for the object. so to make sure,
    // put a breakpoint on the following line and add a watch for $(selector).data(). 
    // then you can find out what key is used by your jQueryUI script.

        var ac = $(selector).data('uiAutocomplete');
        if ( ac ) {
           // do what you want with the autoComplete object. below is the changed version of an example from jqueryUI autocomplete tutorial

           ac._renderItem = function(ul, item) {
                return $("<li>")
                    .append("<a>" + item.label + "</a>")
                    .appendTo(ul);
            };
        }
    }
11
为什么每次更新后他们不更新文档，这太烦人了。无论如何，还是谢谢你。 - Skorunka František
1
也许这是因为我们开发人员最讨厌的两件事之一就是记录文档？ :) 我想第二个可能是填写时间表。 - Cagatay Kalan
1
data('uiAutocomplete') 对我不起作用。目前在jquery-ui演示网站上，它被称为data('ui-Autocomplete')。我认为问题在于.data属性本身。无论你使用什么参数调用它，它都没有定义。 - Johnny
3
在我的版本中，它绝对是“uiAutocomplete”。您可以使用Chrome进行调试，并通过调用.data()来查看属性名称。 - Cagatay Kalan
JQuery 1.7.2 / JQueryUI 1.10.2 - 我发现 uiAutocomplete 和 ui-Autocomplete 都能正常工作！ - Holf
8

data('ui-Autocomplete') 解决了我的问题。我认为这是由于 jquery 1.7 和 jquery-ui 1.8 导致的。而 data('autocomplete') 则正常工作。使用最新版本的这些文件，相同的脚本无法工作。

8

我找到了解决方案！

有些人认为"ui-autocomplete"是错误的，所以他们使用"autocomplete"或"uiAutocomplete"，但这是错误的。实际上，"ui-autocomplete"才是正确的方法。

我遇到了与你相同的问题，我和一个朋友一起找到了这段代码的问题。改为：

.data('ui-autocomplete')._renderItem = function (ul, item) {
       if (!_.include(self.idArr, item.id)) {
            return $('<li></li>').data('ui-autocomplete-item', item).append('<a>' + item.name + '</a>').appendTo(ul);
            }
    };

使用：

._renderItem = function (ul, item) {
      if (!_.include(self.idArr, item.id)) {
         return $('<li></li>').data('ui-autocomplete-item', item).append('<a>' + item.name + '</a>').appendTo(ul);
           }
       };

我认为combobox和autocomplete会返回一个数据('ui-autocomplete')，所以如果你键入.data('ui-autocomplete')，就相当于执行了以下操作：
.data('ui-autocomplete').data('ui-autocomplete')

出了什么问题...嗯，其实我不知道为什么这个不起作用，而没有这个就能正常运行，但相信我，删掉 .data('ui-autocomplete') 就可以愉快地继续啦！

4
实际上，在您的成功函数中，您正在调用response并返回一个对象，如下所示：
return {
           label: item.name,
           image: item.picture,
           json: item,
       }

但是在下一行中
return $("<li></li>").data("item.autocomplete", item).append("<a><img src='" + item.image + "' alt='no photo'/></a>" + item.label + " Number of Likes: " + item.likes).appendTo(ul);

您正在使用未在返回对象中提供的item.likes，因此这是问题所在。我认为您可以像这样使用它：

success:function(data) {
    var result = $.map(data, function (item){
    return {
            label: item.name,
            image: item.picture,
            item.likes 
        };
    });
    response(result);
}

同时保持item.label在<a></a>标签内（这可能不是导致错误的原因），例如：

return $("<li></li>").data("item.autocomplete", item).append("<a><img src='" + item.image + "' alt='no photo'/>"+item.label+"</a>").appendTo(ul);

并确保在下一行中

$.map(data.data, function (item) // notice data.data

无论是使用 data.data 还是仅使用 data，需要根据具体情况而定。如果你没有在代码中使用 json: item，可以将其从对象中删除。

更新：请更改以下行

.data("autocomplete")._renderItem = function (ul, item) {...};

to

.data("autocomplete")?._renderItem = function (ul, item) {...}; // notice the ? mark

或者

if(typeof $('#Your_Input_Id').val()!="undefined")
{
    $('#Your_Input_Id').autocomplete({....});
}

或者

var mydata=$('#Your_Input_Id').autocomplete(...).data('autocomplete');
if(mydata)
    mydata._renderItem = function (ul, item) {...};
1
嗨，Sheikh，感谢您的回复。您是正确的，我的代码中有一个错误（已经更正了），但这不是我正在经历的问题的根源。 - Ben Pearce
另外为了测试，你可以尝试将这个 "<a><img src='" + item.image + "' alt='no photo'/></a>" 替换为 "<img src='" + item.image + "' alt='no photo'/><a>item.label</a>" 或者仅仅移除 img 标签，只是为了测试，请让我知道是否有任何变化。 - The Alpha
我在控制台中得到的错误是“ .data（“autocomplete”）未定义”。即使数据回调函数为空，我仍然会得到这个错误。 - Ben Pearce
尝试使用.data("autocomplete")?._renderItem，注意?。 - The Alpha
或者将您的“autocomplete”调用包装在`if(typeof $('#yourInputName').val()!="undefined"){ $("input#testInput").bind("autocompleteselect", function (event, ui) { }).autocomplete({...} }`内。 - The Alpha
1
如果您查看站点演示中组合框的最新示例，您将看到它们使用data('ui-Autocomplete')。我遇到了和你一样的问题。我之前使用的是jquery-1.6.2和jquery-ui-1.8.16。 一旦我将文件更新为jquery-1.9.1和jquery-ui-1.10.0，错误就被修复了。我认为较旧的jquery-ui自动完成未设置data('ui-Autocomplete')属性，因此在检索时为null/undefined。我希望这可以帮助其他人，因为您可能已经解决了这个问题。
0

您可以实现下面提到的代码行：

.autocomplete( "instance" )._renderItem = function( ul, item ) {

而不是

.data("autocomplete")._renderItem = function (ul, item) {

根据Jquery网站上提供的文档Jquery AutoComplete Documentation and example，您将找到此代码。

从升级版本的jquery 1.10开始，他们对代码进行了更改。希望这能帮到您。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接