Bootstrap使用popover添加额外的typehead输入

时间:2016-02-03 10:56:02

标签: javascript jquery html css twitter-bootstrap

我试图在Popover中获得Typeahead,不知怎的,我实现了它,但是当我点击一个链接时,我正在显示带有弹出框的预先输入,但是每次单击其他文本框时还会添加一些其他元素并在弹出窗口中添加。所以popover正在扩展自己

使用预先输入

的弹出窗口
    var popOverSettings = {
    placement: 'bottom',
    container: 'body',
    html: true,
    selector: '#change-customer',
    title: '<a href="#" class="close" data-dismiss="alert">&times;</a>',
    content: function () {
        return $('#customer-popover').html();
    }
}

$('body').popover(popOverSettings).on('shown.bs.popover', function(){
         enableTypeAhead();
    });

  var numbers, countries, repos, arabic, nba, nhl, films, anExcitedSource;

  numbers = new Bloodhound({
    datumTokenizer: function(d) { return Bloodhound.tokenizers.whitespace(d.num); },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: [
      { num: 'one' },
      { num: 'two' },
      { num: 'three' },
      { num: 'four' },
      { num: 'five' },
      { num: 'six' },
      { num: 'seven' },
      { num: 'eight' },
      { num: 'nine' },
      { num: 'ten' }
    ]
  });

  numbers.initialize();

    function enableTypeAhead(){
      $('.typeahead').typeahead(null, {
        displayKey: 'num',
        source: numbers.ttAdapter()
      });
    }
在互联网的某个地方,我发现我们可以通过添加

在popver中启用typeahead
$('body').popover(popOverSettings).on('shown.bs.popover', function(){
        enableTypeAhead();
});

on('shown.bs.popover'在这里做了诀窍,但我不确定为什么要在popover中添加其他元素

示例小提琴:Fiddle link

0 个答案:

没有答案