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

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（“instance”）._ renderItem = function（ul，item）{

在狀態

.data（“autocomplete”）._ renderItem = function（ul，item）{

根據Jquery站點Jquery AutoComplete文檔和示例中提供的文檔，您將找到此代碼。

從jquery 1.10的升級版本開始，他們對代碼進行了更改。 希望這會幫助你。