如何在附加到类的jQuery UI自动完成中更改下拉列表的呈现? [英] How to change rendering of dropdown in jquery ui autocomplete attached to a class?

问题描述

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

I copied some code from the jQuery UI site and appended it to my own:

$('.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.但是我必须上一堂课，因为领域很多.

I cannot find any documentation on this _renderItem function. Another stackoverflow question/answer suggested that the problem might be having a class instead of an id. But I must have a class, because there are many fields.

如何使它与班级一起工作?

How can I get this to work with my class?

推荐答案

看看我尝试了什么.它似乎为我工作.希望我能正确理解您的问题.

Look what I tried. It seems to work for me. I hope I understood your question right.

$(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的每个自动完成功能.

With your method it seems like the custom rendering only gets applied to the first autocomplete input you click but with the create event it gets applied to each autocomplete with the class .field_values when it's created.

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

Created this fiddle with jQuery v 1.9.3 and jQuery UI 1.10.3 (works fine too with UI 1.9.1)

这是 github 上_renderitem函数的源代码>.

Here's the source code of the _renderitem function on github.

这篇关于如何在附加到类的jQuery UI自动完成中更改下拉列表的呈现?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！