在模态中使用Twitter的Bootstrap typeahead的多个字段

Question

我有一个带有表单和两个输入字段的bootstrap模式，它们使用bootstrap的typeahead。 两者都有效，但第二个的结果无法正确显示，如下所示：

有人可以帮我这个吗？

修改

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

Answer 1

我发现了同样的问题（看起来像某种bug，请参阅：https://github.com/twitter/bootstrap/pull/8436以获得可能的修复）。带有选项的菜单获得一个绝对位置的css顶部。在模态中使用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函数并向其添加+ $('.modal-body').scrollTop()。并添加对scrollHeight的调用以设置动态高度。

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

更新20 aug

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

$.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）似乎也解决了你的问题。 但是...... 要使用Twitter的Typeahead和Bootstrap，您需要添加一些额外的样式表：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;
}

另请参阅：https://github.com/jharding/typeahead.js-bootstrap.css/pull/13

Twitter的Bootstrap 3

推特到Twitter的Bootarap 3的Bootstrap整合目前效果不佳（2013年7月10日）

Answer 2

我也发现了这个问题。我使用此代码更正： -

top：（pos.top + pos.height + this。$ element.offsetParent（）。scrollTop（））

所以这应该纠正所有滚动div的位置，typeAhead在其中。