1

jQueryUIオートコンプリートを使用しています。

すばらしいですが、同じページに複数のオートコンプリートボックスがあり、結果をフォーマットするための複数のモンキーパッチソリューションがあります（現在、元のrenderItemのみを上書きして、ページごとに1つの結果フォーマットを許可できます）。

この問題を解決する方法は、オートコンプリートウィジェットの（私が見つけることができるように）未解決の大きな謎の1つです。オートコンプリート要素の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 );
        }
    });
};

これにより、複数の構成を構成してオートコンプリートの結果をフォーマットできるようになりますか？

たとえば、_renderMenu内にリストされているx個のカスタム_renderItem関数を構成します。

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

だから私の質問は、_renderMenu関数内のチェーンの最上位にあるクラスまたはID（コードでは$$$$ CLASS-OR-ID $$$$）をどのように参照できるかということです。

これが理にかなっていることを願っています、あなたの助けに感謝します！

4

2 に答える 2

2

OK、解決しました。Karimからの少しのインスピレーションのおかげで、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

これは少しハッキーに見えるかもしれませんが、私は正直なところ他に何も考えられません。つまり、各データ項目に「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 に答える