0

jQuery UI Autocomplete ウィジェットを使用し、出力をフォーマットして、「カスタム データと表示」の例を使用して、ドロップダウンにその名前とともに画像を含めます。それはうまくいきます。画像を含むすべてのオプションをドロップダウンする三角形のボタンが右側にある限り、コンボボックス効果をエミュレートしようとしています。ボタンでこの 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

次のように _renderItem に「$($myinput)」を追加することで、これが適切に機能するようになりました。

$($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 に答える