Bootstrap Popover 中的 Typeahead.js答案

【问题标题】：Typeahead.js within Bootstrap PopoverBootstrap Popover 中的 Typeahead.js
【发布时间】：2015-03-11 21:45:25
【问题描述】：

我正在尝试提前输入以在引导弹出窗口中工作。我这里有一个例子：http://jsfiddle.net/6ydb2o79/

<p>This does not work</p>
<a data-placement='above' id="popover_button" class="btn btn-lg btn-danger" href='#'>Click</a>
<div id="popover_content_wrapper" style="display: none">
  <input class="typeahead" type="text" placeholder="States of USA">
</div>
    <hr />
<p>This Works</p>
<input class="typeahead" type="text" placeholder="States of USA">

我认为这不是 z-index 问题。似乎 typeahead.js 无法识别输入查询。

有什么想法吗？谢谢...

【问题讨论】：

标签： jquery twitter-bootstrap-3 typeahead.js

【解决方案1】：

尝试使用shown.bs.popover这样的方法

$('#popover_button').popover({
    html: true,
    content: function () {
        return $('#popover_content_wrapper').html();
    }
}).on('shown.bs.popover', function(){
    enableTypeAhead();
});

将您的 typeahead 代码留在方法中，如果在显示弹出框后调用。它似乎已经解决了这个问题。

这是demo。希望这会有所帮助

【讨论】：

谢谢 Dhiraj 就是这样！