jQuery自动完成.data("自动完成")未定义

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

无论是应该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) {...};