0

我正在使用 jQuery UI 自动完成小部件并使用“自定义数据和显示”示例格式化输出以在下拉列表中包含图像及其名称。它工作得很好。我正在尝试模拟组合框效果，只要右侧有一个三角形按钮，它会下拉所有选项 - 包括图像。将这个 Combobox 模拟与一个按钮一起使用可以下拉每个项目的“值”......但是我如何让这个按钮下拉自定义数据 [“.data("autocomplete") 中的格式化输出。 _renderItem = function(ul, item)..."]?

这是我的代码：

    $(function() {

    function log( message ) {
    $( "<div/>" ).text( message ).prependTo( "#log" );
    $( "#log" ).scrollTop( 0 );
    }

    $.ajax({
        url: "order-prints.xml",
        dataType: "xml",
        success: function( xmlResponse ) {
            var mydata = $( "print", xmlResponse ).map(function() {
                return {
                    value: $( "name", this ).text(),
                    id: $( "id", this ).text(),
                    name: $( "name", this ).text(),
                    icon: $( "icon", this ).text()
                };
            }).get();

        var $myinput = $( "#project" ).autocomplete({
            source: mydata,
            minLength: 0,
            select: function( event, ui ) {
                log( ui.item ?
                    "SELECTED: " + ui.item.name + ", ID: " + ui.item.id + ", ICON: " + ui.item.icon :
                    "Nothing selected, input was " + this.value );
                $( ".project-icon" ).attr( "src", "folder/slideshow2/thumbs/" + ui.item.icon );
                $( "#project-id" ).val( ui.item.id );
            }

        })

//-- begin button to drop down all options  
        .addClass("ui-widget ui-widget-content ui-corner-left");

$("<button type='button'>&nbsp;</button>")                     
.attr("tabIndex", -1)                     
.attr("title", "Show All Items")                     
.insertAfter($myinput)                     
.button({                         
    icons: {                             
        primary: "ui-icon-triangle-1-s"                         
    },                         
    text: false                     
})                     
.removeClass("ui-corner-all")                     
.addClass("ui-corner-right ui-button-icon")                   
.click(function() {                         
   if ($myinput.autocomplete("widget").is(":visible")) {
    $myinput.autocomplete( "close" );
         return;                         
    }                                              
    $(this).blur();                                                 
    $myinput.autocomplete("search", "");                         
    $myinput.autocomplete.focus();                     
})
//-- end button to drop down all options

            .data( "autocomplete" )._renderItem = function( ul, item ) {
        var imgsrc = "folder/slideshow2/thumbs/";
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a><div class='project-container'>" + item.name + ", " + item.id + "<img class='project-icon' src='" + imgsrc + item.icon + "'>" + "</div></a>" )
            .appendTo( ul );
    };

        }
    });


});
4

1 回答 1

0

我现在可以通过将“$($myinput)”添加到 _renderItem 来正常工作，如下所示：

$($myinput).data( "autocomplete" )._renderItem = function( ul, item ) {
        var imgsrc = "folder/slideshow2/thumbs/";
        return $( "<li></li>" )
            .data( "item.autocomplete", item )
            .append( "<a><div class='project-container'>" + item.name + ", " + item.id + "<img class='project-icon' src='" + imgsrc + item.icon + "'>" + "</div></a>" )
            .appendTo( ul );
    };
于 2012-08-17T14:30:14.727 回答