jquery - 扩展引导输入的宽度以匹配输入字段

Question

我知道这个问题之前至少被问过三遍，但我看到的答案不是我想要的。我希望增加 twitter bootstrap 使用其 typeahead 功能生成的自动完成字段的宽度。我一直在阅读它可以覆盖该字段中的所有文本。也就是说，文本越长，自动完成字段越宽。但是我希望它是一个 span6，因为这就是我的搜索字段的宽度。有任何想法吗？我已经看到了一些 jquery 答案，但我无法遵循它们。

Answer 1

Michael Watson 在他的评论中给出了我认为最简单的答案。

.twitter-typeahead { width: 100%; } 

更新 #1：根据下面的评论（感谢 Steve，Vishi），对.tt-hint, .tt-input,做同样的事情.tt-dropdown-menu。

更新 #2： mlissner 报告.tt-dropdown-menu是 now .tt-menu，所以最终结果是

.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }

Answer 2

下拉菜单是一个 ul，其中包含typeahead dropdown-menu您可以使用 CSS 设置其宽度的类：

.dropdown-menu
{
 width: .... px;
}

span6 的宽度不是静态的，因此您需要一些媒体查询以使其响应。

对于Bootstrap 3，typeahead 功能已从 TB3 中移除，而是使用https://github.com/twitter/typeahead.js/。您将需要一些额外的 CSS来将其与 Twitter 的 Bootstrap 集成。您需要加载一些额外的 CSS 以使typeahead.js下拉菜单适合默认 Bootstrap 的主题。尝试扩展 Bootstrap 的 LESS，或者如果您正在寻找更多扩展版本，请尝试：typeahead.js-bootstrap3.less。

现在使用 .tt-dropdown-menu 类设置下拉菜单。除了更改 CSS，您还可以尝试设置宽度动态。使用 typeahead 类的 typeahead 输入标签：

$('.typeahead').typeahead({})
on('typeahead:opened',function(){$('.tt-dropdown-menu').css('width',$('.typeahead').width() + 'px');});

Answer 3

要使下拉列表与字段宽度匹配，您需要这样的内容：

$(document).on('typeahead:opened', function(event, datum) {
  var width = $(event.target).width();
  $('.tt-dropdown-menu').width(width);
});

使用 event.target 和全局文档侦听器对上述内容进行了小改进。

Answer 4

我正在使用带有typeahead.js-bootstrap3.less的 Bootstrap 3.2.0，并将输入嵌套在 div 中，如下所示：

<div class="form-group">
    <label>my label</label>
    <div class="col-md-4">
        <div class="input-group tt-input-group">
            <input id="mytypeahead" class="form-control" />
        </div>
    </div>
</div>

我还需要将其添加到我的 css 中：

.tt-input-group {
    width: 100%;
}

Answer 5

这是一个纯 CSS 解决方案：

由于.dropdown-menu是绝对定位，添加position: relative;到围绕uib-typeahead输入字段的 div 并设置width: 100%;为您.dropdown-menu将修复它。

你的 CSS 看起来像这样：

.typeahead-search {
    position: relative;
}

.dropdown-menu {
    width: 100%;
}

Answer 6

这适用于较新的版本：

.twitter-typeahead, .tt-menu 
{
  display: block !important;
}