扩展Bootstrap Typeahead的宽度以匹配输入字段

Question

我知道这个问题之前已经问过至少三次，但我看到的答案并不是我想要的。我想要增加 Twitter Bootstrap 的 typeahead 功能生成的自动完成字段的宽度。我一直在阅读关于它会延伸以覆盖字段内所有文本的内容。也就是说，文本越长，自动完成字段就越宽。然而，我希望它是 span6，因为我的搜索字段宽度就是这么宽。有什么想法吗？我看到了一些 jQuery 的答案，但我无法理解。

- NSaid

Answer 1

迈克尔·沃森在他的评论中给出了我认为是最简单的答案。

.twitter-typeahead { width: 100%; } 

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

更新 #2： mlissner 报告说 .tt-dropdown-menu 现在改为 .tt-menu，因此最终结果是

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

- user41871

---

我不得不做同样的事情来处理 .tt-hint，但这对我有效。 - Steve

我必须将其他几个类的宽度设置为100％。这对我有用。.twitter-typeahead, .tt-hint, .tt-input, .tt-dropdown-menu { width: 100%; } - vma

我相信.tt-dropdown-menu现在是.tt-menu，所以新的东西是：.twitter-typeahead, .tt-hint, .tt-input, .tt-menu { width: 100%; }。这真是一团糟。 - mlissner

需要在我的情况下使用!important来覆盖其他样式（我正在使用Semantic UI）。 - MK Yung

Answer 2

下拉菜单是一个带有类typeahead和dropdown-menu的

，您可以使用CSS设置其宽度：


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

span6的宽度不是固定的，因此您需要一些媒体查询来使其响应。 对于Bootstrap 3，typeahead函数已从TB3中删除，而改用https://github.com/twitter/typeahead.js/。您需要加载一些额外的CSS才能将其与Twitter的Bootstrap集成。尝试extended Bootstrap's LESS或者如果您正在寻找更加扩展的版本，请尝试：typeahead.js-bootstrap3.less。 现在使用.tt-dropdown-menu类设置下拉菜单的宽度。除了更改CSS之外，您还可以尝试动态设置宽度。使用typeahead输入标记的类：

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

- Bass Jobsen

---

请使用$('#yourinput').outerWidth()来匹配输入框的实际宽度。谢谢。 - Romain Bruckert

这个解决方案 ".twitter-typeahead{ width: 100%; }" 对我有用。 - Michael L Watson

@MichaelLWatson +1 因为这个简单明了的解决方案。 - Trein

Answer 3

为了使下拉框与字段宽度匹配，您需要像这样做：

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

使用事件目标和全局文档监听器对上述内容进行了小改进。

- Binary Logic

Answer 4

我正在使用Bootstrap 3.2.0和typeahead.js-bootstrap3.less，并将输入框嵌套在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%;
}

- twoteesbrett

Answer 5

这里有一个纯CSS解决方案：

由于.dropdown-menu是绝对定位的，因此将position: relative;添加到包装在uib-typeahead输入字段周围的div中，并将width: 100%;设置为.dropdown-menu，即可解决问题。

你的CSS可能会像这样：

.typeahead-search {
    position: relative;
}

.dropdown-menu {
    width: 100%;
}

- Joe McLean

---

谢谢很好用，只是建议的长文本显示在下拉框外面。 - Ahmed Al Abdulaal

@AhmedAlAbdulaal 如果你的文本需要被截断，可以将这个类添加到它上面： .overflow-ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } - Joe McLean

Answer 6

这是针对新版本：

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

- candlejack

---

这似乎禁用了在选择元素后建议下拉菜单消失的功能。 - Dennington-bear

这在BS4和TypeAhead 0.11.1中非常有效。我的代码略有不同：.twitter-typeahead，.tt-hint，.tt-input，.tt-menu {width：100％; display：block}只需删除!important即可。 - AKOP