33

当我尝试使用下面的代码实现自动完成时，我收到一条错误消息：

.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);
  };
4

6 回答 6

60

我也有同样的问题，基于jquery ui的1.10.0版本，我觉得你应该试试

data('uiAutocomplete')

代替

data('autocomplete')

根据 Johnny 的评论，我检查了 .data() 函数的工作原理。Yes, jQuery returns null from .data() call when selector does not find any items.

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

所以似乎最好这样做：

    $(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);
            };
        }
    }
于 2013-01-22T22:07:58.853 回答
8

data('ui-Autocomplete')解决了我的烦恼。我认为它来自jquery 1.7with jquery-ui 1.8。data('autocomplete')没关系。具有这些文件的最新版本的相同脚本不起作用。

于 2013-03-03T00:03:57.207 回答
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);
           }
       };

我认为组合框和自动完成返回一个数据（'ui-autocomplete'），所以如果你输入 .data('ui-autocomplete') 你正在做类似的事情：

.data('ui-autocomplete').data('ui-autocomplete')

怎么了....好吧，实际上我不知道为什么这不起作用以及为什么没有它起作用，但是相信我，删除 .data('ui-autocomplete') 并感到高兴！

于 2013-09-19T12:05:57.450 回答
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) {...};

至

.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) {...};
于 2012-09-05T18:23:14.163 回答
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') 属性，因此在检索时它是空的/未定义的。我希望这对其他人有所帮助，因为您可能已经解决了这个问题。

于 2013-02-07T17:38:37.937 回答
0

您可以实现下面提到的行

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

在状态

.data("自动完成")._renderItem = function (ul, item) {

根据 Jquery 站点Jquery AutoComplete 文档和示例中提供的文档， 您将找到此代码。

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

于 2015-09-15T07:58:32.440 回答