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);
        });