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

我有自己喜欢的jQuery UI Autocomplete设置并且工作正常，但是有一个致命的缺陷。 在我的自动填充中，我使用像这个例子的自定义显示。 我有一些非常相似的东西，但有例外……

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

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

这是我如何添加额外的行：

.data( 'autocomplete' )._renderItem = function( ul, item ) { return $( '
' ) .data( 'item.autocomplete', item ) .append( '' + item.label + '
' + item.desc + '' ) .appendTo( ul ); }; 

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

Answer 1

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

 addautocomplete($('.tagEntry')); 

至：

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

Answer 2

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

 $.ui.autocomplete.prototype._renderItem = function( ul, item ) { return $( '
' ) .data( 'item.autocomplete', item ) .append( '' + item.label + '
' + item.desc + '' ) .appendTo( ul ); }; 

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

Answer 3

或者：

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