2011-02-08 13 views
4

私はjQuery UIオートコンプリート設定を好きなだけうまく機能させていますが、致命的な欠陥が1つあります。私のオートコンプリートでは、私はカスタムディスプレイlike this exampleを使用します。私は非常に類似したものを作りましたが、例外的に...複数の要素のjQuery UIオートコンプリート書式設定

唯一の違いは、同じクラスの複数のオートコンプリート要素がその1ページにあることです。最初の要素だけが余分なデータ行を示し、残りは基本的な自動補完を示します。

私はちょうどそれらのクラスのすべての要素を反復処理し、それらの上にオートコンプリートを呼び出すことが、私は一度それを呼び出すと、それは「ただ働き」を持つのは良い方法があった期待していたことにより、望ましい結果を得ることができます。ここで

は、私は、余分な行を追加している方法は次のとおりです。

.data('autocomplete')._renderItem = function(ul, item) { 
    return $('<li></li>') 
    .data('item.autocomplete', item) 
    .append('<a>' + item.label + '<br/><small>' + item.desc + '<small></a>') 
    .appendTo(ul); 
}; 

私はまったくのコンソール例外が届かないことに注意してください。

+0

私は同じ問題を抱えています、あなたは答えを得たことがありますか? –

答えて

1

唯一の方法から自分のコードを変更することである

$(..).autocomplete(..).each(function() { 
    $.data(this, "autocomplete")._renderItem = function (ul, item) { ... } }) 
2

あなたは、単にオブジェクトプロトタイプを経由して、代わりの単一インスタンス上の関数をオーバーライドする必要があります。

$.ui.autocomplete.prototype._renderItem = function(ul, item) { 
    return $('<li></li>') 
    .data('item.autocomplete', item) 
    .append('<a>' + item.label + '<br/><small>' + item.desc + '<small></a>') 
    .appendTo(ul); 
}; 

オートコンプリートをアクティブにする前に、スクリプトがロードされた後に関数を上書きします。

addautocomplete($('.tagEntry')); 

:また

$('.tagEntry').each(function() { 
    addautocomplete(this); 
}); 
+0

ありがとうございますJosiah - 1つの問題。同じページに複数のオートコンプリートがあり、それぞれ異なるソースから取得しますが、この1つのクラスだけが説明を必要とします。 – sshefer

+0

@sshefer - それであなたはあなたのようにすることができます。 '$( 'select-for-specific-autocomplete')。data( 'autocomplete')._ renderItem'です。データは要素に関連付けられていることに注意してください。特定の要素に関連付けられたデータを変更する必要がある場合は、セレクタが一意であることを確認してください。 –

+0

それは問題を解決しません。そのクラスの最初のオートコンプリートのみが余分なデータを示し、残りのデータは表示されません。私は何か間違っているのですか? – sshefer

2

:私はこの仕事をすることができます

関連する問題