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

【问题标题】：jQuery UI Autocomplete Formatting for Multiple Elements多个元素的 jQuery UI 自动完成格式
【发布时间】：2011-06-23 15:34:36
【问题描述】：

我有我喜欢的 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 );
};

我应该注意，我根本没有收到任何控制台异常。

【问题讨论】：

我也遇到了同样的问题，你有没有得到答案？

标签： jquery jquery-ui autocomplete

【解决方案1】：

或者：

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

【讨论】：

【解决方案2】：

我可以完成这项工作的唯一方法是更改我的代码：

addautocomplete($('.tagEntry'));

收件人：

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

【讨论】：

这也不是我所期望的。希望addautcomplete 为每个元素添加相同的功能，以节省资源。这些天我只使用 jQuery 进行原型设计，但我想知道这是否是一个错误，或者作者是否决定只让 autocomplete 处理第一个选定的元素，而不是所有选定的元素，如果是，为什么。跨度>

【解决方案3】：

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

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

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

【讨论】：

感谢 Josiah - 一个问题。我在同一页面上有多个来自不同来源的自动完成功能，只有这一类需要描述。
@sshefer - 然后你就可以按照你的方式去做。 $('#selector-for-particular-autocomplete').data( 'autocomplete' )._renderItem。请记住，数据与元素相关联。如果您需要更改与特定元素关联的某些数据，请确保您的选择器是唯一的。
这并不能解决问题。只有该类的第一个自动完成显示了额外的数据，而不是其余的。我做错了吗？
@sshefer - 是的。将一个特殊的类添加到您想要表现不同的自动完成中，然后使用该类（或 id）选择器覆盖实例函数 _renderItem
我目前正在这样做 ($('input.myclass').data('autocomplete')._renderItem) 但只有该类的第一个输入才会渲染额外的行。我在该页面上还有 3 个仅使用 item.label 获得默认自动完成功能。有 3 个相同的输入 - 只有页面上加载的第一个获得额外的描述行，其他没有。我发现这样做的唯一方法是在页面加载时迭代每一个。