1

我正在使用 jQuery UI 自动完成。

这很好，但是在同一页面上使用多个猴子修补解决方案来格式化结果存在多个自动完成框的问题（目前您只能覆盖原始 renderItem 允许每页使用一种结果格式）。

如何解决这个问题是自动完成小部件的一大未解之谜（据我所知）。我的想法是，如果我可以引用自动完成元素的 id，我可以在猴子补丁中添加一个 if 语句，从而允许我创建多个实例。让我演示一下：

格式化结果的猴子补丁是：

$.ui.autocomplete.prototype._renderItem: function( ul, item) {
    return CUSTOMISE FORMATTING HERE;
};

如果我在同一页面上指定，请说：

$("#input1").autocomplete();

$("#input2").autocomplete();

我正在尝试实现单独的功能，并有使用 _RenderMenu 的想法：

$.ui.autocomplete.prototype._renderMenu: function( ul, items ) {
    var self = this;
    $.each( items, function( index, item ) {
        self._renderItem( ul, item );
    });
};

通过将其更改为：

$.ui.autocomplete.prototype._renderMenu: function( ul, items ) {
    var self = this;
    $.each( items, function( index, item ) {
        if ( $$$$CLASS-OR-ID$$$$ == '#input1' ) {
             self._renderItemCustom1( ul, item );
        }
        else if ( $$$$CLASS-OR-ID$$$$ == '#input2' ) {
            self._renderItemCustom2( ul, item );
        }
        else {
            self._renderItem( ul, item );
        }
    });
};

这应该启用多个配置的配置来格式化自动完成结果？

例如，通过配置 x 个自定义 _renderItem 函数，在 _renderMenu 中列出：

$.ui.autocomplete.prototype._renderItemCustom1: function( ul, item) {
    return CUSTOMISE FORMATTING HERE;
};

所以我的问题是，如何在 _renderMenu 函数中引用位于链顶部的类或 ID（代码中的 $$$$CLASS-OR-ID$$$$）？

希望这是有道理的，感谢您的帮助！

4

2 回答 2

2

好的，解决了，感谢卡里姆的一点启发，我决定它不需要是 elementID，我只需要能够为每个自动完成指定不同的参考/选项，我通过以下方式实现：

$("#input1").autocomplete({
    source: source1,
    format: format1    /* This is my planted reference */
});
$("#input1").autocomplete({
    source: source2,
    format: format2
});

RenderMenu 变为：

$.ui.autocomplete.prototype._renderMenu: function( ul, items ) {
    var self = this;
    $.each( items, function( index, item ) {
        if ( this.options.format == 'format1' ) {
             self._renderItemCustom1( ul, item );
        }
        else if ( this.options.format == 'format2' ) {
            self._renderItemCustom2( ul, item );
        }
        else {
           self._renderItem( ul, item );
        }
    });
};

只要在 _renderMenu 中指定它们，我就可以指定无限的 _RenderItem：

$.ui.autocomplete.prototype._renderItemCustom1: function( ul, item ) {
    return CUSTOM FORMATTING;
}

它也可能比依赖元素 ID 更好，因为这意味着相同的自定义 _renderItem 可用于具有不同 ID 但输出方法相同的多个输入。

编辑：为了让它更有效率而不是膨胀 _renderMenu 我重新编码了它：

$.ui.autocomplete.prototype._renderMenu = function( ul, items) {
    var self = this;
    if ( typeof this.options.format == 'undefined' ) {
        $.each( items, function( index, item ) {
            self._renderItem( ul, item );
        });
    }
    else {
        var fname = 'self._renderItem' + this.options.format + '( ul, item )';
        $.each( items, function( index, item ) {
            eval(fname);
        });
    }
}

这段新代码意味着您不必为每个新的 _renderItem 方法重写 _renderMenu，而是会在以下情况下自动执行 _renderItemFORMATNAME

format: FORMATNAME

被指定。虽然对于我原来的例子

$.ui.autocomplete.prototype._renderItemCustom1
becomes:
$.ui.autocomplete.prototype._renderItemformat1
于 2011-02-03T12:40:55.437 回答
0

这可能看起来有点hacky，但老实说，我想不出其他任何东西。简而言之，我们为每个数据项添加一个“controlId”属性。我们重写_renderMenu读取这个属性的方法，并通过一些条件运行它的值：

$.ui.autocomplete.prototype._renderMenu = function(ul, items) {
    var self = this;
    $.each(items, function(index, item) {
        if (item.controlId == 'foo') {
            alert('got foo');
            self._renderItemCustom1(ul, item);
        }
        else if (item.controlId == 'bar') {
            alert('got bar');
            self._renderItemCustom2(ul, item);
        }
        else {
            self._renderItem(ul, item);
        }
    });
};

// each object should have a 'controlId' parameter
var projects = [
    {
    value: "jquery",
    label: "jQuery",
    desc: "the write less, do more, JavaScript library",
    icon: "jquery_32x32.png",
    controlId: 'foo'}, // this tells the AC which
{
    value: "jquery-ui",
    label: "jQuery UI",
    desc: "the official user interface library for jQuery",
    icon: "jqueryui_32x32.png",
    controlId: 'foo'},
{
    value: "sizzlejs",
    label: "Sizzle JS",
    desc: "a pure-JavaScript CSS selector engine",
    icon: "sizzlejs_32x32.png",
    controlId: 'foo'}
];

$("#foo").autocomplete({
    source: projects
});

老实说，我希望有人发布比这个更漂亮的解决方案。无论如何，这是一个演示。

于 2011-02-03T12:06:46.043 回答