jQuery 自动完成给出 TypeError : this. _renderItem(...) 未定义

Question

我目前在页面的三个位置使用 .data( "ui-autocomplete")._renderItem = function( ul, item ) 。现在我需要再添加一个，然后就完成了。

但是这次我收到错误消息

TypeError: this._renderItem(...) is undefined

奇怪的是，只有当我的 IF 测试为假时，我才会得到这个。

 .data( "ui-autocomplete" )._renderItem = function( ul, item ) {

  // If only one row is returned and ID = 0, then return 'no result' message
  if(item.id == '0') {
    return jQuery( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<div class='no-result'>"+ item.value + "</div>" )
        .appendTo( ul );
  }

我不明白为什么它在这里失败，而不是在其他三个地方。有什么地方发生冲突吗？

这是我的代码

jQuery('#my-selector').autocomplete({
  minLength: 2,
  source: function( request, response ) {
    jQuery.ajax({
        url: callback_url,
        dataType: "json",
        data: {
                term: request.term
        },
        success: function( data ) {
          response( jQuery.map( data, function( item ) {
            return {
              id: item.id,
              value: item.name,
              name_encoded: item.name_encoded
            }
        }));
      }
    });
  },
  select: function( event, ui ) {
        return false;
  }
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
  if(item.id == '0') {
    return jQuery( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<div class='no-result'>"+ item.value + "</div>" )
        .appendTo( ul );
  }
};

更新

此更改有效。但我仍然不明白为什么我必须在此处使用 else 语句，而我没有在其他两个 autocomplete 函数中使用它。

.data( "ui-autocomplete" )._renderItemData = function( ul, item ) {
        if(item.id == '0') {
                return jQuery( "<li></li>" )
                        .data( "item.autocomplete", item )
                        .append( "<div class='no-result'>"+ item.value + "</div>" )
                        .appendTo( ul );
        } else {
            return this._renderItem( ul, item ).data( "ui-autocomplete-item", item );
        }

};

从带有搜索词some的查询中返回数据

[
  {"id":"8186","name":"Some Are Thieves"},
  {"id":"6149","name":"Somet"},
  {"id":"6150","name":"Somethin'Else from SKECHERS"}
]

Answer 1

是因为测试的原因，如果测试失败那么_renderItem不会返回任何值，相当于返回undefined。

但是 _renderItem 被调用，如下所示，这会导致错误，因为 jquery 尝试将数据值设置为返回值。

return this._renderItem( ul, item ).data( "ui-autocomplete-item", item );

在您的情况下，您必须覆盖 _renderItemData 而不是 _renderItem

var el = $('<my-autocomplete-element>');
var _renderItemData = el.data("ui-autocomplete")._renderItemData;
el.data("ui-autocomplete")._renderItemData = function(ul, item) {

    // If only one row is returned and ID = 0, then return 'no result' message
    if (item.id == '0') {
        return jQuery("<li></li>").data("item.autocomplete", item).data(
                "ui-autocomplete-item", item).append("<div class='no-result'>"
                + item.value + "</div>").appendTo(ul);
    } else {
        _renderItemData.apply(this, arguments)
    }
}

演示:Plunker