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。但我必须有一堂课，因为有很多领域。

我怎样才能让它与我的班级一起工作？

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

这是一个工作示例。

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

使用 jQuery v 1.9.3 和 jQuery UI 1.10.3 创建了这个小提琴（UI 1.9.1 也可以正常工作）

这是github_renderitem上的函数的源代码。

Answer 2

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

这就是它对我的工作方式。