为什么typeahead.js的tt-dropdown-menu没有显示（使用Bootstrap 3）？

Question

这是我的HTML。

<div class="container">
<div class="row">
    <div class="col-md-12">
        <div class="form-inline">
            <span>Looking for</span>
            <div class="form-group">
                <input type="text" class="form-control typeahead" placeholder="Name or PersonID" autocomplete="off">
            </div>
            <button id="btn-go" class="btn btn-primary">Go</button>
        </div>
    </div>
</div>

这是我的 JavaScript 代码：

var people = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    remote: 'contact/search/?id=%QUERY'
});

people.initialize();

$('.typeahead').typeahead(null, {
    name: 'people',
    displayKey: 'value',
    source: people.ttAdapter(),
    templates: {
        suggestion: Handlebars.compile('<p><strong>{{fullname}}</strong> - {{personid}}</p>')
    }
}).on('typeahead:selected', function(obj, datum) {
    console.log(obj);
    console.log(datum);
});

一切正常，服务器返回结果，下拉菜单填充完毕但不可见。看起来是CSS问题，需要帮助。为什么菜单被隐藏了？我已经检查过相关标签的"display"或"z-index"等基本属性，但都没有帮助。有什么想法吗？

顺便说一下，我正在使用bootstrap 3 typeahed css，可以在这里找到。

编辑：

找到了问题，请看我的回答。

- Miguel

---

我遇到了完全相同的问题，请在您找到问题的解决方案后分享给我 :) - Michael Cook

刚刚发现问题所在，至少在我的情况下是这样。请参见编辑部分。 - Miguel

这不是我的问题，但我也发现了我的问题，并将其附加在此供未来读者参考。在我的场景中，我正在调用 $（'foo'）.typeahead()，然后在代码后端将 $（'foo'）附加到DOM中。诀窍在于.typeahead（）会将$（'foo'）包装在父元素中，而该父元素从未进入DOM。对我来说，解决方法是附加$（'foo'）.parent（）而不是$（'foo'）。 - Michael Cook

Answer 1

发现 Bootstrap 和/或 Typeahead 没有问题。对我来说，问题在于 div.container 在另一个设置了 overflow:hidden 的 div 中。所以当相关的行是页面上唯一的元素时，由于溢出设置的原因，下拉菜单被隐藏了。移除此设置后，一切都按预期工作。

- Miguel