3

フォームと、ブートストラップの先行入力を利用する 2 つの入力フィールドを備えたブートストラップ モーダルがあります。どちらも機能していますが、以下に示すように、2 番目の結果は正しく表示されません。

ここに画像の説明を入力

誰かがこれについて私を助けることができますか?

編集

Jクエリ:

$(function(){

    var stopObjs = {};
    var stopNamen = [];

    $(".naamtypeahead").typeahead({
        source: function ( query, process ) {

            $.ajax({
                url: '../includes/js/autocompletenaam.php',
                type: 'GET',
                dataType: 'json',
                data: 'naam=' + query
                ,cache: false
                ,success: function(data){

                    stopObjs = {
                    };
                    stopNamen = [];

                    _.each( data, function(item, ix, list){

                        stopNamen.push( item.naam )

                        stopObjs[ item.naam ] = item.adres;
                    });

                        process( stopNamen );
                }
            });
        }
        , updater: function ( adres) {

            $( ".adres" ).val( stopObjs[ adres ] );

            return adres;
        }
    });
});
4

2 に答える 2

2

私は同じ問題を見つけました (ある種のバグのように見えます。可能な修正については、 https ://github.com/twitter/bootstrap/pull/8436 を参照してください)。オプション付きのメニューは、絶対位置の CSS トップを取得します。モーダルで typeahead を使用する場合、スクロールの高さは上部の計算に使用されません。この問題は次の場所で修正されています: https://github.com/bassjobsen/Bootstrap-3-Typeahead

モーダルのスクロールが問題の原因であり、複数のフィールドの使用ではありません（先行入力あり）。

私が見つけた最良の解決策（更新！）：

function scrollHeight()
{
  return $('.modal-body').scrollTop();
} 

$.fn.typeahead.Constructor.prototype.show = function () {
      var pos = $.extend({}, this.$element.position(), {
        height: this.$element[0].offsetHeight
      })

      this.$menu
        .insertAfter(this.$element)
        .css({
          top: (pos.top + pos.height + scrollHeight.call())
        , left: pos.left
        })
        .show()

      this.shown = true
      return this

    }

これにより、typeahead クラスの show 関数が上書きされ、追加+ $('.modal-body').scrollTop()されます。高さを動的に設定するための scrollHeight への呼び出しを追加します。

updateも参照してください: http://bootply.com/66845 (javascript を削除して問題を確認してください)

8月20日更新

上記のコードは、1 つのモーダル (1 つの .modal-body クラスのみ) でのみ機能します。2 つ以上のモーダルの場合は、次のコードを使用します。

$.fn.typeahead.Constructor.prototype.show = function () {
      var pos = $.extend({}, this.$element.position(), {
        height: this.$element[0].offsetHeight
      })                    
      this.$menu
        .insertAfter(this.$element)
        .css({
          top: (pos.top + pos.height + this.$element.closest('.modal-body').scrollTop())
        , left: pos.left
        })
        .show()

      this.shown = true
      return this

}

Twitter の Typeahead と Twitter の Bootstrap 3

Twitter の Bootstrap 3 では、bootstrap-typeahead.js が削除され、Twitter の Typeahead ( http://twitter.github.io/typeahead.js/ ) を使用するように指示されます。https://github.com/twitter/bootstrap/issues/7805も参照してください。Twitter の Typeahead (Twitter の Bootstrap 2.x を使用) に切り替えると、問題が解決するようです。しかし ... Bootstrap で Twitter の Typeahead を使用するには、追加のスタイルシートを追加する必要があります: https://github.com/twitter/typeahead.js#bootstrap-integration。複数の (先行入力) フォーム フィールドを持つモーダルでこれを使用すると、フォーム フィールドがドロップダウン メニューの上に表示されます。これを修正するには、スタイルシートに z-index:1 を追加します。

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint {
  margin-bottom: 0;
   z-index: 1;
}

参照: https://github.com/jharding/typeahead.js-bootstrap.css/pull/13

Twitter の Bootstrap 3

Twitter の Bootstrap 3 に対する Twitter の Typeahead の Bootstrap 統合は、現時点ではうまく機能しません (2013 年 7 月 10 日)

于 2013-07-09T23:27:48.840 に答える
1

私もこの問題を発見しました。このコードを使用して修正しました:-

上: (pos.top + pos.height + this.$element.offsetParent().scrollTop())

そのため、これは typeAhead がその中にあるすべてのスクロール div の位置を修正する必要があります。

于 2013-09-21T05:26:50.147 に答える