Question

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

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

Answer 1

我遇到了同样的问题并且基于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);
            };
        }
    }

Answer 2

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

Answer 3

我找到了解决方案！

有些人认为“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'）并开心！

Answer 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

是{@ 1}}还是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({....});
}

Answer 5

如果您在网站演示中查看最新的组合框示例，您会看到他们使用数据（'ui-Autocomplete'）。我遇到了和你一样的问题。我之前使用的是jquery-1.6.2和jquery-ui-1.8.16。一旦我将文件更新为jquery-1.9.1和jquery-ui-1.10.0，错误就得到了修复。我假设旧的jquery-ui自动完成没有设置数据（'ui-Autocomplete'）属性，因此在检索时它是null / undefined。我希望这可以帮助其他人，因为你可能已经解决了这个问题。

Answer 6

您可以实施以下提及的

行

.autocomplete（＆＃34; instance＆＃34;）._ renderItem = function（ul，item）{

的实例

.data（＆＃34; autocomplete＆＃34;）._ renderItem = function（ul，item）{

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

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

jQuery自动完成.data（“自动完成”）未定义

6 个答案:

我找到了解决方案！