`format` callback в новейшей версии jQuery UI selectmenu

Question

Я хочу сделать замену <select> специальным форматированием текста с использованием jQuery UI Selectmenu.

Третьих и пятые выбирает в этой скрипке являются хорошими примерами того, что я пытаюсь достичь:

http://jsfiddle.net/fnagel/GXtpC/

В скрипке, есть определенная функция addressFormatting(), которая принимает первоначальный вариант текст и возвращает HTML вывода, который будет использоваться для рендеринга selectmenu. Эта функция передается в качестве обратного вызова в инициализации selectmenu:

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

Я использую jQuery UI Selectmenu 1.11.4. Проблема в том, что опция обратного вызова format отсутствует в этой версии.

Это часть кода из 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() {} 
}, 

И это часть кода из более новой версии, которую я использую:

var selectmenu = $.widget("ui.selectmenu", { 
version: "1.11.4", 
defaultElement: "<select>", 
options: { 
    appendTo: null, 
    disabled: null, 
    icons: { 
     button: "ui-icon-triangle-1-s" 
    }, 
    position: { 
     my: "left top", 
     at: "left bottom", 
     collision: "none" 
    }, 
    width: null, 

    // callbacks 
    change: null, 
    close: null, 
    focus: null, 
    open: null, 
    select: null 
}, 

format вариант здесь нет, а его использование при инициализации не влияет.

В методе API documentation существует метод _renderItem(), имя которого предполагает, что оно может использоваться для добавления пользовательского форматирования к выделенному элементу, но оно имеет личную область видимости, поэтому я не могу использовать его вне виджета. Существует также общедоступный метод create(), но я не уверен, могу ли я его использовать или использовать, чтобы изменить структуру созданного selectmenu.

Answer 1

Как уже упоминалось, опция выбора была удалена из selectmenu, прежде чем она была частью библиотеки jquery-ui. Существует способ добавить пользовательский код в виджет 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;"); 
     } 
    } 
});