我有一个 Bootstrap 模式,其中包含一个表单和两个使用 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 顶部。在模式中使用 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 类的显示功能 并添加 并添加一个调用到 scrollHeight 以动态设置高度。+ $('.modal-body').scrollTop()
到它。
另见更新: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)似乎也可以解决您的问题。 但是…… 要将 Twitter 的 Typeahead 与 Bootstrap 一起使用,您需要添加一些额外的样式表: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 日)
关于javascript - 模态中带有 Twitter 的 Bootstrap typeahead 的多个字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17548252/