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