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

Question

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

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

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

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

Answer 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/

Answer 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);
    };
);

Answer 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 );
};