jQuery UI 组合框：_renderItem 中断显示所有按钮

Question

我有 jQuery UI 自动完成组合框 工作（基本上是 http://jqueryui.com 上示例的副本），但我无法在不破坏 Show All 的情况下使用 _renderItem 方法重写项目渲染 我的组合框中的按钮。

版本：

1. http://jsfiddle.net/H3rGB/3/ - 在没有自定义 _renderItem 的情况下工作
2. http://jsfiddle.net/H3rGB/5/ - 全部显示按钮不起作用。 _renderItem 工作，即使它的 HTML 输出看起来相同（为了测试目的，我当然希望最后有不同的输出）。

所以这两个版本的不同之处在于：

.data("ui-autocomplete")._renderItem = function (ul, item) {                        
    return $("<li></li>")
    .data("ui-autocomplete-item", item)
    .append("changed: " + item.label)
    .appendTo(ul);
}

我同时使用 jQuery 和 jQuery UI 1.10。

我已经被困在这里好几个小时了，所以我宁愿问比我更有经验的人。谢谢！

Answer 1

好的，我设法解决了。

核心问题是：当我调用this.input.autocomplete("instance")时，对象this.input被改变了。它变成了一个匿名函数而不是 jQuery 对象。

所以我想出了这个解决方法：

// normal initialization as in jQuery demo example
this.input = $("<input>")
    ...;

// save the input object for later    
var input2 = this.input;

// ovewrrite renderItem with my function
this.input.autocomplete("instance")._renderItem = function(ul, item) {
    item.label = item.label.replace(/(.*\>)/i, '<span style="color: #aaa;">$1</span>');
    return $("<li></li>")
        .data("ui-autocomplete", item)
        .append(item.label)
        .appendTo(ul);
};

// restore "broken" input object
this.input = input2;