Bootstrap弹出框（Popover）插件动态加载数据

效果

鼠标点击输入框弹出提示内容，内容是根据输入的字符动态加载的，效果如图：

HTML

<input type="text" class="form-control" name="fromArea" id="fromArea" placeholder="地区" data-toggle="popover">

JS

初始化，放入一个div用来存加载的内容

$("#fromArea").popover({placement: "auto",html: true,content: "<div id='fromArea_div'></div>"});

弹框显示的时候触发getArea()方法

$('#fromArea').on('show.bs.popover', function () {getArea();});

加载内容的方法：getArea()

function getArea() {$.get({url: '/person/findarea',data: {fromArea: $("#fromArea").val()},success: function (data) {var html = "";jQuery.each(data.page, function(i, v) {html = html + "<button type=\"button\" class=\"btn btn-success btn-xs\" onclick='selectFromArea(this)'>" + v + "</button>&nbsp;";});$("#fromArea_div").html(html);}});}

键盘监听事件（输入内容中间停顿0.5秒会触发getArea()）

var flag = false;var timer;//键盘监听事件$('#fromArea').keydown(function () {clearTimeout(timer);flag = true;timer = setTimeout(function () {flag = false;getArea();}, 500);});