0

同じオートコンプリートを 2 つの入力フィールドにバインドしたいと思います。

フィールド：

<input id="rwF1" maxlength="250" type="text" value="">
<input id="rwF2" maxlength="250" type="text" value="">

次に、jQuery のオートコンプリーター:

    $("#rwF1, #rwF2").autocomplete({
        source: availableTags
    }).data( "autocomplete" )._renderItem = function( ul, item ) {
        return $('<li class="roomWizardLI"></li>')
        .data( "item.autocomplete", item )
        .append( "<a><span class='title'>" + item.value + "</span><span class='Count'>" + "2" + " members</span></a>")
        .appendTo( ul );
    };

これがバインドされ、オートコンプリート メニューが両方の入力に表示されます。カスタム renderItem は、最初の入力フィールドにのみ適用されます。2 番目は完全に無視されます。両方の入力フィールドでオートコンプリートを完全に機能させる理由と方法はありますか?

ありがとう

4

2 に答える 2

1

問題は、一致した要素の最初の.data要素のデータを取得することです（ドキュメントによる）。

オートコンプリートウィジェットが適用された各アイテムを繰り返し処理し、カスタムレンダリングコードを適用する必要があります。

$("#rwF1, #rwF2").autocomplete({
    source: availableTags
}).each(function () {
    $(this).data( "uiAutocomplete" )._renderItem = function( ul, item ) {
        return $('<li class="roomWizardLI"></li>')
            .data( "item.autocomplete", item )
            .append( "<a><span class='title'>" + item.value + "</span><span class='Count'>" + "2" + " members</span></a>")
            .appendTo( ul );
    };
});

例： http： //jsfiddle.net/kcSfw/

編集済み：Jquery 1.12.0を使用するには、uiAutocompleteを使用する必要があります

于 2012-04-20T18:55:42.773 に答える
0

クリックするたびにオートコンプリートを入力にバインドできます。

 $(document).on("focus",".class_of_autocomplete_inputs",function(e) {
    if ( !$(this).data("autocomplete") ) {
$( ".class_of_autocomplete_inputs" ).autocomplete({

....

したがって、ページをロードするときに一連の ID にバインドしようとする代わりに、それらにクラスを与えて、「焦点を合わせている」ID に動的にバインドします。

于 2016-08-14T09:18:55.947 に答える