Javascript `在最新版本的jQuery UI selectmenu中格式化“回调”

我想使用

jQuery UI Selectmenu

用自定义文本格式替换

这把小提琴中的第三个和第五个选择是我努力实现目标的好例子：

在fiddle中，定义了函数

addressFormatting（）

，该函数接受原始选项文本并返回html输出，用于呈现selectmenu。此函数在selectmenu初始化中作为回调传递：

$('select').selectmenu({
    format: addressFormatting
});

我使用的是

jQuery UI Selectmenu 1.11.4

。问题在于此版本中不存在

格式
回调选项

这是
jQuery UI Selectmenu version 1.5.0pre
中的一部分代码，用于提供的小提琴中：

$.widget("ui.selectmenu", {
options: {
    appendTo: "body",
    typeAhead: 1000,
    style: 'dropdown',
    positionOptions: null,
    width: null,
    menuWidth: null,
    handleWidth: 26,
    maxHeight: null,
    icons: null,
    format: null, // <<<<<<<<<<<< FORMAT OPTION IS PRESENT <<<<<<<<<<<<
    escapeHtml: false,
    bgImage: function() {}
},

$.widget（“ui.selectmenu”{
选项：{
附：“身体”，
提前打字：1000，
风格：'下拉'，
位置选项：空，
宽度：空，
menuWidth:null，
手宽：26，
maxHeight:null，
图标：空，
格式：null，//前面提到的格式选项在成为jquery ui库的一部分之前已从selectmenu中删除。有一种方法可以将自定义代码注入selectmenu小部件并覆盖处理此功能的函数

// Create objects that you want inside the menu list
var RenderItem = function(item) {
    return $('<div/>')
        .addClass('ui-menu-item-wrap')
        .append(
            $('<span/>')
                .addClass('ui-menu-item-header')
                .text(item.label + ' (' + item.km + " km)")
        ).append(
            $('<span/>')
                .addClass('ui-menu-item-description')
                .text(item.desc)
        );
};

// Extend functions in the selectmenu plugin
$.widget("ui.selectmenu", $.ui.selectmenu, {

    // Input middleware to the _setText function, that will build
    // jQuery objects to render
    _renderItem: function( ul, item ){
        var li = $( "<li>" ),
            wrapper = $( "<div>", {
                title: item.element.attr( "title" )
            } );

        if ( item.disabled ) {
            this._addClass( li, null, "ui-state-disabled" );
        }
        // Insert middleware
        this._setText( wrapper, RenderItem(item));

        return li.append( wrapper ).appendTo( ul );
    },

    // Overwrite this function to add custom attribute values from the option
    _parseOption: function( option, index ) {
        var optgroup = option.parent( "optgroup" );
        return {
            element: option,
            index: index,
            value: option.val(),
            label: option.text(),
            desc: option.attr('data-desc'), // Custom <option> value saved to item
            km: option.attr('data-km'), // Custom <option> value saved to item
            optgroup: optgroup.attr( "label" ) || "",
            disabled: optgroup.prop( "disabled" ) || option.prop( "disabled" )
        };
    },

    // Overwrite this function to append a value, instead of inserting text
    // So that the jQuery element is handled correctly.
    _setText: function(element, value) {
        if (value) {
            element.append(value);
        } else {
            element.html("&#160;");
        }
    }
});

//在菜单列表中创建所需的对象
var RenderItem=函数（项）{
返回$（''）
.addClass（'ui-menu-item-wrap'）
.附加(
$('')
.addClass（'ui-menu-item-header'）
.text（item.label+”（“+item.km+”km）”）
).附加(
$('')
.addClass（'ui-menu-item-description'）
.text（项目描述）
);
};
//扩展selectmenu插件中的功能
$.widget（“ui.selectmenu”，$.ui.selectmenu{
//将中间件输入到_setText函数，该函数将构建
//要渲染的jQuery对象
_renderItem：功能（ul，项目）{
变量li=$（“
”），
包装器=$（“”{
标题：item.element.attr（“标题”）
} );
如果（项已禁用）{
此._addClass（li，null，“ui状态已禁用”）；
}
//插入中间件
此._setText（包装器、渲染器（项目））；
返回li.append（包装器）.appendTo（ul）；
},
//覆盖此函数以从选项中添加自定义属性值
_parseOption：函数（选项，索引）{
var optgroup=option.parent（“optgroup”）；
返回{
元素：选项，
索引:索引,，
值：option.val（），
标签：option.text（），
desc:option.attr（'data-desc'），//保存到项的自定义值
km:option.attr（'data-km'），//保存到项的自定义值
optgroup:optgroup.attr（“标签”）| |“”，
disabled:optgroup.prop（“disabled”）| | option.prop（“disabled”）
};
},
//覆盖此函数以附加值，而不是插入文本
//以便正确处理jQuery元素。
_setText:函数（元素、值）{
如果（值）{
元素。追加（值）；
}否则{
html（ ；）；
}
}
});

// Create objects that you want inside the menu list
var RenderItem = function(item) {
    return $('<div/>')
        .addClass('ui-menu-item-wrap')
        .append(
            $('<span/>')
                .addClass('ui-menu-item-header')
                .text(item.label + ' (' + item.km + " km)")
        ).append(
            $('<span/>')
                .addClass('ui-menu-item-description')
                .text(item.desc)
        );
};

// Extend functions in the selectmenu plugin
$.widget("ui.selectmenu", $.ui.selectmenu, {

    // Input middleware to the _setText function, that will build
    // jQuery objects to render
    _renderItem: function( ul, item ){
        var li = $( "<li>" ),
            wrapper = $( "<div>", {
                title: item.element.attr( "title" )
            } );

        if ( item.disabled ) {
            this._addClass( li, null, "ui-state-disabled" );
        }
        // Insert middleware
        this._setText( wrapper, RenderItem(item));

        return li.append( wrapper ).appendTo( ul );
    },

    // Overwrite this function to add custom attribute values from the option
    _parseOption: function( option, index ) {
        var optgroup = option.parent( "optgroup" );
        return {
            element: option,
            index: index,
            value: option.val(),
            label: option.text(),
            desc: option.attr('data-desc'), // Custom <option> value saved to item
            km: option.attr('data-km'), // Custom <option> value saved to item
            optgroup: optgroup.attr( "label" ) || "",
            disabled: optgroup.prop( "disabled" ) || option.prop( "disabled" )
        };
    },

    // Overwrite this function to append a value, instead of inserting text
    // So that the jQuery element is handled correctly.
    _setText: function(element, value) {
        if (value) {
            element.append(value);
        } else {
            element.html("&#160;");
        }
    }
});