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

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

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

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