Question

我已经 jQuery UI自动完成组合框工作（基本上是http://jqueryui.com上的一个示例的副本）但是我不能用_renderItem方法rtwrite项目渲染而不打破<我的组合框中的em>全部显示按钮。

版本：

http://jsfiddle.net/H3rGB/3/ - 无需自定义_renderItem
http://jsfiddle.net/H3rGB/5/ - 全部显示按钮无法正常工作。 _renderItem即使它的HTML输出看起来相同也是有效的（对于测试purpouses，当然我最后想要一个不同的输出）。

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

.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;

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

1 个答案: