javascript-模式中包含Twitter的Bootstrap标头的多个字段

我有一个引导程序模态,具有一个表单和两个使用引导程序预输入的输入字段.
两者都可以正常工作,但是第二个结果却无法正确显示,如下所示：

有人可以帮我吗？

编辑

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

解决方法:

我发现了相同的问题(看起来像是某种错误,请参阅：https://github.com/twitter/bootstrap/pull/8436以获取可能的修复).带有选项的菜单具有绝对位置的CSS顶部.在模态中使用预先输入时,在计算顶部时不使用滚动高度.已在以下位置解决此问题：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的调用以设置动态高度.

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

更新8月20日

上面的代码仅适用于一种模态(仅一种.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)似乎也可以解决您的问题.但是…
要在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的Typeahead与Twitter的Bootstrap 3的Bootstrap集成目前无法正常运行(2013年7月10日)

标签：twitter-bootstrap,css,javascript,jquery
来源： https://codeday.me/bug/20191123/2064683.html