Question

我有自己喜欢的jQuery UI自动完成设置并且工作正常，但是有一个致命的缺陷。在我的自动填充功能中，我使用了自定义显示like this example。我有一些非常相似的东西，但有例外......

唯一的区别是我在该页面上有多个相同类的自动完成元素。只有第一个元素显示额外的数据行，其余的只显示基本的自动完成。

我可以通过迭代所有这些类元素并调用它们上的自动完成来获得所需的结果，但我希望有一种更好的方法来调用它并让它“正常工作”。

以下是我添加额外行的方式：

.data( 'autocomplete' )._renderItem = function( ul, item ) {
  return $( '<li></li>' )
  .data( 'item.autocomplete', item )
  .append( '<a>' + item.label + '<br/><small>' + item.desc + '<small></a>' )
  .appendTo( ul );
};

我应该注意到，我根本没有得到任何控制台例外。

Answer 1

您只需要通过对象原型覆盖该功能，而不是在单个实例上覆盖该功能。

$.ui.autocomplete.prototype._renderItem = function( ul, item ) {
  return $( '<li></li>' )
  .data( 'item.autocomplete', item )
  .append( '<a>' + item.label + '<br/><small>' + item.desc + '<small></a>' )
  .appendTo( ul );
};

在激活任何自动填充之前覆盖该函数，但在加载脚本之后。

Answer 2

或者：

$(..).autocomplete(..).each(function () {
   $.data(this, "autocomplete")._renderItem = function (ul, item) { ... } })

Answer 3

我能做到这一点的唯一方法是改变我的代码：

addautocomplete($('.tagEntry'));

要：

$('.tagEntry').each(function() {
     addautocomplete(this);
});

多个元素的jQuery UI自动完成格式

3 个答案: