Typeahead.js 在 Bootstrap 弹出框中

Question

我正在尝试让 typeahead 在 bootstrap 弹出框内工作。我这里有一个例子：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 似乎无法识别输入查询。

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

Answer 1

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

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

将您的预输入代码留在方法中，并在弹出窗口显示后调用 if。它似乎已经解决了这个问题。

这里是demo。希望这有帮助

Typeahead.js 在 Bootstrap 弹出框中

Typeahead.js within Bootstrap Popover

jquery

typeahead.js

twitter-bootstrap-3