如何在页面上修补 *只有一个 * 自动完成实例？答案

【问题标题】：How to patch *just one* instance of Autocomplete on a page?如何在页面上修补 *只有一个 * 自动完成实例？
【发布时间】：2011-09-04 00:34:43
【问题描述】：

这个答案——jQueryUI: how can I custom-format the Autocomplete plug-in results?——描述了如何对 jqueryUI 自动完成小部件进行猴子补丁，以便它以特定的方式显示内容。它使用的方法是替换$.ui.autocomplete.prototype 上的函数。

这意味着所有自动完成小部件将获得此补丁。

有没有办法为一个输入元素修补自动完成小部件？它是什么？

当我检查 $('$input').autocomplete 时，我看不到任何自动完成 fns（_renderItem、_renderMenu、_search 等）。

【问题讨论】：

标签： jquery-ui autocomplete jquery-ui-autocomplete

【解决方案1】：

查看custom data and display demo。此演示没有修改自动完成小部件的原型对象，这意味着只有该小部件的实例受到影响：

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

这是一个工作演示：http://jsfiddle.net/vJSwq/

【讨论】：

这似乎在 IE 中不起作用，错误始终是“data(...) 为空或不是对象。”在这种情况下，data 实际上不受支持吗？ api.jquery.com/data 中的示例正常工作，该页面上唯一的警告是 IE 不允许以这种方式摆弄 XML。
尝试改用.data('uiAutocomplete')。这在 jQueryUI 的最新版本中有所改变。
如果您收到“尝试分配给只读属性”。在 webkit 中。尝试使用.data('ui-autocomplete')。
此时this page上的最后一个例子建议使用.data('ui-autocomplete')。
@AndrewWhitaker 我在悬停数据时遇到问题，数据消失了。我正在使用自动完成 jquery ui

【解决方案2】：

Andrew Whitaker 的代码只适用于一个自动完成输入。如果您选择多个输入元素，则第二个自动完成小部件不会显示任何条目。您必须添加一个 foreach 来处理所有选定的输入元素，如提到的here

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

【讨论】：

我今天刚遇到这个，有多个实例。谢谢！

【解决方案3】：

对于最新版本的 jQuery(1.8+) / jQuery UI (1.10+)，你应该使用：

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

【讨论】：