jquery-ui - 如何更改附加到类的 jquery ui 自动完成中下拉列表的呈现？

Question

我从 jQuery UI 站点复制了一些代码并将其附加到我自己的:

$('.field_values') // class that all input fields are a member of in my html
// here I am skipping .autocomplete, which works
// next comes the copied code
.data( 'ui-autocomplete' )._renderItem = function( ul, item ) {
return $( '<li>' )
.append( '<a>' + item.label + '<br>' + item.value + '</a>' )
.appendTo( ul );
 }
;

我找不到有关此 _renderItem 函数的任何文档。另一个 stackoverflow 问题/答案表明问题可能是类而不是 id。但是我必须有一个类，因为有很多字段。

我怎样才能让它与我的类(class)一起工作？

Answer 1

看看我尝试了什么。它似乎对我有用。我希望我理解你的问题。

$(document).ready(function () {
    //...here is the projects source

    $(".field_values").autocomplete({
        source: projects,
        create: function () {
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                return $('<li>')
                    .append('<a>' + item.label + '<br>' + item.value + '</a>')
                    .appendTo(ul);
            };
        }
    });
});

这是一个 working example .

使用您的方法，似乎自定义渲染仅应用于您单击的第一个自动完成输入，但使用 create它被应用于每个自动完成类的事件 .field_values创建时。

使用 jQuery v 1.9.3 和 jQuery UI 1.10.3 创建了这个 fiddle (使用 UI 1.9.1 也可以正常工作)

这是 _renderitem的源代码功能在 github .