Twitter的Bootstrap typehead在模态框中有多个字段

Question

Twitter的Bootstrap typehead在模态框中有多个字段

3

我有一个使用Bootstrap的模态框，里面包含一个表单和两个输入字段，这两个输入字段都使用了Bootstrap的typeahead。虽然它们都能正常工作，但是第二个输入字段的结果显示有问题，如下图所示： enter image description here

有人能帮我解决这个问题吗？编辑 JQUERY：

$(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;
        }
    });
});

- JK87

可能是CSS冲突了吗？ - Rene Pot

2个回答

1

我也遇到了这个问题。我通过使用以下代码进行了更正：-

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

因此，在所有滚动的 div 上，应该可以校正 typeAhead 在其中的位置。

- CHB

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Bass Jobsen · Accepted Answer

我发现了同样的问题（看起来像是某种错误，请参见：https://github.com/twitter/bootstrap/pull/8436，可能有一个修复方法）。选项菜单使用绝对位置css top。当在模态框中使用typeahead时，滚动高度未用于计算顶部。这个问题已经在https://github.com/bassjobsen/Bootstrap-3-Typeahead中得到修复。

模态框的滚动引起了问题，而不是使用多个字段（带有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函数，并添加一个调用scrollHeight来动态设置高度。

另请参见更新：http://bootply.com/66845（删除javascript以查看问题）

更新 8月20日

上面的代码仅适用于一个modal（只有一个.modal-body类）。对于两个或更多的modals，请使用以下代码：

$.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。在模态框中使用多个(typeahead)表单字段时，表单字段会覆盖下拉菜单。为了解决这个问题，请在样式表中添加z-index:1：

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

Twitter的Bootstrap 3

目前（2013年7月10日），Twitter的Typeahead在Twitter的Bootstrap 3中的整合效果不佳。

参考链接：https://github.com/jharding/typeahead.js-bootstrap.css/pull/13