Bootstrap在弹出窗口中提前输入

Question

I am trying to implement bootstrap's typeahead but I am trying to have the input bar appear on a popover when a button is click.

Pretty much have a typeahead functionality inside a popover.

<div id="popover-button-container">
    <button id="popover-button" type="button" class="btn btn-default" 
            data-toggle="popover"
            data-placement="left">${entries.size() - 4} more</button>
            <div id="popover-content" class="hide">
                <input class="typeahead" type="text" placeholder="Search by Artist Name" />
            </div>
</div>

Adding the JS:

<script>
$("#popover-button").popover({
    html:true,
    content: function(){
        return $('#popover-content').html();
    }
})</script>

The typeahead doesnt seem to work in the popover however. If I remove the class=hide part, the unhidden input works but not the one in the popover.

Wondering if anyone has ran into this?

Any help would be great!

Answer 1

did you try this?

// Constructs the suggestion engine
// Typehead codes here

$('#myPopover').on('show.bs.popover', function () {

  // Initialize your typehead script
  typehead.initilize();

  // Followed by your Typehead codes here...

})